CSS Animasyonlu Slider örneği
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS Animasyonlu Slider örneği

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(3314)
RAPOR ET
Bir sitede gördüğüm slideri kendim kodlamak istedim ve yaptım.Bir işe yarasın diye koyuyorum.

Görüntüsü :
http://ustaderslik.com/resim/ders/rmw64.png
indir : http://ustaderslik.com/dosya/slider.rar

Kodlar:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var resim="r";
$(function(){
$("#sag,#sol").click(function(){
if(resim=="r"){
var sayi=1;
$(".slider_resim").each(function(){
var index=$(this).index()+1;
var left=(-200*index)+"px";
var saniye=400*index;
$(this).html('<img src="l'+sayi+'.jpg"/>');
$(this).children("img").css("left",left).animate({"left":"0"},saniye);
sayi++; resim="l";
})
}else{
var sayi=1;
$(".slider_resim").each(function(){
var index=$(this).index()+1;
var left=(-200*index)+"px";
var saniye=400*index;
$(this).html('<img src="r'+sayi+'.jpg"/>');
$(this).children("img").css("left",left).animate({"left":"0"},saniye);
sayi++; resim="r";
});
}
})
})
$("#sag,#sol").click(function(){
alert("sdsads")
})
</script>
<style type="text/css">
*{padding:0;margin:0;border:0;}
body{background:#f1f1f1;}
.slider{width:800px;height:300px;margin:auto;position:relative;margin-top:100px;}
.slider_resim{width:200px;height:300px;float:left;position:relative;overflow:hidden;}
.slider_resim img{width:200px;height:300px;position:absolute;}
.kesik{width:800px;height:300px;position:absolute;top:0;left:0;background-image:url(kesik.png);background-size:800px 300px;background-repeat:no-repeat;z-index:10;}
.bsag{width:50px;height:22px;padding:2px;position:absolute;right:-60px;top:125px;background:#ddd;text-align:center;cursor:pointer;border-radius:16px;-webkit-border-radius:16px;-moz-border-radius:16px;-o-border-radius:16px;}
.bsol{width:50px;height:22px;padding:2px;position:absolute;left:-60px;top:125px;background:#ddd;text-align:center;cursor:pointer;border-radius:16px;-webkit-border-radius:16px;-moz-border-radius:16px;-o-border-radius:16px;}
.bsol:hover,.bsag:hover{background:#ff0040;color:#f1f1f1;}
.temiz{clear:both;}
</style>
</head>
<body>

<div class="slider">
<div class="slider_resim"><img src="r1.jpg" /></div>
<div class="slider_resim"><img src="r2.jpg"/></div>
<div class="slider_resim"><img src="r3.jpg" /></div>
<div class="slider_resim"><img src="r4.jpg" /></div>
<div class="bsag" id="sag">İleri</div>
<div class="bsol" id="sol">Geri</div>
<div class="kesik"></div>
<div class="temiz"></div>
</div>

</body>
</html>



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol