Bir sitede gördüğüm slideri kendim kodlamak istedim ve yaptım.Bir işe yarasın diye koyuyorum.
Görüntüsü :
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>
UstaDerslik
