Yazılım Örnekleri

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>