Yazılım Örnekleri

Jquery tab  slayt örneği

<script  type="text/javascript">
$(function(){ 
$(".butonkutusu ul.buton li").click(function(){
        var indis = $(this).index();
            $(".butonkutusu ul.buton li").removeClass("aktif");
            $(this).addClass("aktif");
            $(".resimkutusu ul.resim li").hide();
          $(".resimkutusu ul.resim li:eq("+indis+")").fadeIn("fast");
        return false;            });
});

</script> 

<style>
.genel{width:500px;height:auto;margin:0 auto;overflow:hidden;float:top;}
    
.butonkutusu{width:110px;height:auto;float:left;position:relative;}
.butonkutusu ul.buton {width:100px;height:auto;list-style:none;
text-align:center;margin-top:15px;margin-bottom:15px;padding-top:5px;margin-left:-40px;position:relative;float:top;text-decoration:none;color:#FFF;}    
.butonkutusu ul.buton li {width:80px;height:25px;background:#F30;text-align:center;margin-top:15px;margin-bottom:15px;padding-top:5px;position:relative;float:top;}        
.butonkutusu ul.buton li a{    text-decoration:none;color:#FFF;    }        
.butonkutusu ul.buton li.aktif {width:100px;height:25px;background:#C00;margin-top:15px;margin-bottom:15px;padding-top:5px;position:relative;float:top;}    
.butonkutusu ul.buton li.aktif a {color:#FFF;text-align:center;}    
            
.resimkutusu{width:330px;height:280px;border-left:1px solid #000;float:left;position:relative;overflow:hidden;}        
.resim{    width:320px;height:280px;float:top;position:relative;list-style:none;    }
.resimler{width:300px;height:280px;list-style:none;}    
.resimler img{width:300px;height:280px;}
</style>

<div class="genel">

<div class="butonkutusu">
<ul  class="buton">
<li ><a href="#">Buton 1</a></li>
<li ><a href="#">Buton 2</a></li>
<li ><a href="#">Buton 3</a></li>
<li ><a href="#">Buton 4</a></li>
</ul>
</div>

<div class="resimkutusu">
<ul class="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>