sadet48 - JQuery ile Slider Yapımı

JQuery ile Slider Yapımı

<!DOCTYPE html>
<head>
<title>JQuery ile Slider Yapımı</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
var a=0;
//geri gitme fonksiyonu
function  once(){
    $("#r"+a).hide();
    $("#r"+a).show();
    a--;
    if(a<0){a=5};
    $("#r"+a).show();
    $(".resim li").hide();
    $(".resim li:eq("+a+")").show();
};
//ileri gitme fonksiyonu
function  sonra(){
    $("#r"+a).hide();
    $("#r"+a).show();
    a++;
    if(a>5){a=0};
    $("#r"+a).hide();
    $("#r"+a).show();
    $(".resim li").hide();
    $(".resim li:eq("+a+")").show();
};
//her 3 saniyede, bir sonrakine geç
var int=self.setInterval("sonra()",3000);
</script>
<style>
/* Slider Tasarımı */
.slider{width: 545px; height: 350px; margin: 100 auto; }
#goruntu ul.resim{width: 545px; height: 350px;padding:0; margin:0; list-style-type: none;overflow: hidden}
#goruntu ul.resim li{padding:0; margin:0;}
#goruntu ul.resim li img{padding:0; margin:0;width: 545px; height: 350px;}
</style>
</head>
<body>
    <div class="slider">
    <div id="goruntu">
        <ul class="resim">
       <li><a href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSqldaMbFESJu8SJdCX9FOEiEgDuXD-hmiYIPbhuWdk_cg_rNDx" alt=""/></a></li>
       <li><a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQAh4Q0fAqFMFFYa7AUuCJDYgGrQn7HEyn39h8q3pL3i93LuRuO" alt=""/></a></li>
       <li><a href="#"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQpqOAQmtWso0AEOhNno6CJhz109cFg7E-BwCnC04p1dVT_YKMb-Q" alt=""/></a></li>
       <li><a href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT6MTVzK8lUVErKjyccCudQP1a2l5pEtnQUY8DMikLnIufuq8TW" alt=""/></a></li>
       <li><a href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSnJ8tTb7t1plRUjKxkRhpTMOyROM9LA8P_oTW3cUVq_knfq0Cl3Q" alt=""/></a></li>
        </ul>
    </div>
    </div>
</body>
</html>