Jquery ile slayt örneği
<script type="text/javascript">
$(function (){
$("#slider ul#resim li").hide();
$("#slider ul#resim li:first").show()
var deger = 0
$("#buton ul#ileri li").click(function(){
if (deger < 3 ){
deger++;
$("#slider ul#resim li ").hide();
$("#slider ul#resim li:eq("+deger+")").fadeIn(1000);
}else {
deger=0;
$("#slider ul#resim li ").hide();
$("#slider ul#resim li:eq("+deger+")").fadeIn(1000);
}
return false;
});
$("#buton ul#geri li").click(function(){
if (deger < 3 ){
deger--;
$("#slider ul#resim li ").hide();
$("#slider ul#resim li:eq("+deger+")").fadeIn(1000);
}else {
deger=0;
$("#slider ul#resim li ").hide();
$("#slider ul#resim li:eq("+deger+")").fadeIn(1000);
}
return false;
});
});
</script>
<style>
a{ text-decoration:none;}
ul,li{padding:0; margin:0; list-style:none;}
#slider{ overflow:hidden; width:300px; height:280px; margin:20px auto;
position:relative; }
#slider ul#resim li a img{ width:300px; height:250px;}
#slider ul#resim li img{ width:300px; height:250px;}
#buton{ overflow:hidden; width:100px; height:100px; margin:20px auto;
position:relative;}
#buton ul#ileri { position:relavite; bottom:10px; left:10px;}
#buton ul#ileri li { float:left;}
#buton ul#ileri li a{padding:6px; margin-right:5px; background:#CCC; display:block; color:#FFF;}
#buton ul#ileri li.aktif a{ background:#F00;}
#buton ul#geri { position:relavite; bottom:10px; left:10px;}
#buton ul#geri li { float:left;}
#buton ul#geri li a{padding:6px; margin-right:15px; background:#CCC; display:block; color:#FFF;}
#buton ul#geri li.aktif a{ background:#F00;}
</style>
<div id="slider">
<ul id="resim" >
<li class="resimler"><img src="img/1.jpg" /></li>
<li class="resimler"><img src="img/2.jpg"/></li>
<li class="resimler"><img src="img/3.jpg"/></li>
<li class="resimler"><img src="img/4.jpg" /></li>
</ul>
</div><div id="buton">
<ul id ="geri">
<li ><a href="#">geri</a></li>
</ul>
<ul id="ileri">
<li ><a href="#">ileri</a></li></ul>
</div>