Yazılım Örnekleri

jQuery sliderların genel olarak mantığı aynıdır.Listemizdeki resimleri ve menülerin boyutuna göre dış div imizi oluştururuz.Css overflow tekniği ile diğer resimleri saklarız. Listemizdeki tıklanan butonun index değerini alırız.Aldığımız buton index değeri ile aynı index değerine sahip olan resmi çağrırız.Aşağıdaki örneği incelediğinizde rahatlıkla anlayabileceksiniz.

<script type="text/javascript">
$(function (){    
            var Slider=0;
        $.Slider=function(toplam){
            $("#slider ul#buton li").removeClass("aktif");
            $("#slider ul#resim li").hide();
            if (Slider < toplam-1){
                Slider++;
            $("#slider ul#buton li:eq("+Slider+")").addClass("aktif");
            $("#slider ul#resim li:eq("+Slider+")").fadeIn("fast");                                    
                }else {
            $("#slider ul#buton li:first").addClass("aktif");
            $("#slider ul#resim li:first").fadeIn("fast");    
                Slider=0;    
                }}
            var toplamLi = $("#slider ul#buton li" ).length;
            var interval = setInterval(' $.Slider( '+toplamLi+' )' ,3000);
            $("#slider").hover(function(){
                clearInterval(interval);
                    },function(){
    interval = setInterval(" $.Slider(' +toplamLi+' )" ,3000);    
                    });
        $("#slider ul#buton li:first ").addClass("aktif");
        $("#slider ul#resim li").hide();
        $("#slider ul#resim li:first").show();
        $("#slider ul#buton li").click(function(){
            var indis = $(this).index();
            $("#slider ul#buton li ").removeClass("aktif");
            $(this).addClass("aktif");
            $("#slider ul#resim li").hide();
            $("#slider ul#resim li:eq("+indis+")").fadeIn("fast");                                    
            Slider = indis;
                return false;                             
     });        });

</script>

<style>
body{margin:auto; font:14px Arial, Helvetica, sans-serif;}
a{ text-decoration:none;}
ul,li{padding:0; margin:0; list-style:none;}
#slider{ overflow:hidden; width:300px; height:250px; margin:20px auto;
position:relative;}
#slider ul#resim li a img{ width:300px; height:250px;}
#slider ul#buton { position:absolute; bottom:10px; left:10px;}
#slider ul#buton li { float:left;}
#slider ul#buton li a{padding:6px; margin-right:5px; background:#CCC; display:block; color:#FFF;}
#slider ul#buton li.aktif a{ background:#F00;}
</style>

<div id="slider">
<ul id="resim" >
<li  class="resimler"><img src="resim/1.jpg" /></li>
<li class="resimler"><img src="resim/2.jpeg"/></li>
<li class="resimler"><img  src="resim/3.jpg"/></li>
<li class="resimler"><img src="resim/4.jpg" /></li></ul>
<ul id="buton">
<li ><a href="#">1</a></li>
<li ><a href="#">2</a></li>
<li ><a href="#">3</a></li>
<li ><a href="#">4</a></li>
</ul>
</div>