Üye Girişi Yapınız     


    E-Posta
    

    Şifreniz
    



Şifremi Unuttum


Ana Sayfa Site Hakkında İletişim Ziyaretçi Defteri Döküman İndir Makale Ekle Haber Ekle

     jquery ile slider uygulaması
     gürcü     19.01.2014     11:39:26

Bu uygulama ile Jquery kütüphanesi kullanılarak yapılmış basit bir slider örneğini sizlerle paylaşmak istiyorum. Web sitelerinizde başarılı bir şekilde kullanabileceğiniz bir fotoğraf görüntüleme uygulamasıdır. Uygulamayı denemek için, makale detayındaki kodları herhangi bir metin editöre ya da dreamweaver türünde bir programın html sayfasına yapıştırıp html olarak, resimleri sakladığınız klasörün içine kaydedin ve kodları resim isimlerine göre yeniden düzenleyin. Bu uygulama 500x250 boyutunda yapılmıştır isterseniz bunu değiştirebilirsiniz.



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery ile slider uygulaması</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">
$(function(){
var LiSayisi = $(".slider ul li").length
var uzunluk = LiSayisi * 500
var deger = 0
$(".slider ul").css("width",uzunluk + "px")
$("div#sliderbuton a.sonraki").click(function(){
if(deger < LiSayisi - 1)
{
deger++
$(".slider ul").stop().animate({"margin-left":"-" + 500 * deger},1000)
}
else
{
deger = 0
$(".slider ul").stop().animate({"margin-left":"0"},1000)
}
return false();
})
$("div#sliderbuton a.onceki").click(function(){
if(deger > 0)
{
deger--
$(".slider ul").stop().animate({"margin-left":"-" + 500 * deger},1000)
}
return false;
})
})
</script>
        <style>
*{
margin:0px;
padding:0px;
border:0px;
}
a{
text-decoration:none;
}
  ul{
   list-style-type:none; 
}
 #slider{
margin:20px;
width:500px;
}
 .slider{
width:500px;
height:250px;
overflow:hidden;
}
.slider ul li{
  width:500px;
height:250px;
float:left;
  }
 #sliderbuton{ text-align: right;
  padding-top: 10px;
}
#sliderbuton a{ background: #333; 
color: #fff; 
padding: 5px;
 } 
</style>
</head>
<body>
       <div id="slider">
<div class="slider">
            <ul>
<li><a href="#"><img src="a.jpg" alt="" width="500" height="250" /></a></li>
<li><a href="#"><img src="b.jpg" alt="" width="500" height="250" /></a></li>
<li><a href="#"><img src="c.jpg" alt="" width="500" height="250" /></a></li>
<li><a href="#"><img src="d.jpg" alt="" width="500" height="250" /></a></li>
<li><a href="#"><img src="f.jpg" alt="" width="500" height="250" /></a></li>
</ul>
            </div>
            <div id="sliderbuton">
            <a href="#" class="onceki">Önceki</a>
<a href="#" class="sonraki">Sonraki</a>
            </div>
       </div>
</body>
</html>

Facebook'ta Paylaş    
Diğer AJAX İçerikleri       Tüm Yazılar        Ana Sayfa


  =>Soru Sorun veya Yorum Yazın...

İsim Giriniz :
  

  =>Yapılan Yorumlar...