2015-02-10 156 views
0

HTML代碼 我正在創建jQuery圖像滑塊和此圖像滑塊的html和css代碼。 jquery圖像滑塊前一個按鈕

<style type="text/css"> 
#slider{overflow: hidden; width: 600px; height: 400px; position: relative; border: 4px solid #CCC; margin: auto;} 
#slider ul{padding: 0; margin: 0; width: 2400px; position: relative; top: 0; left: 0;} 
#slider ul li{list-style: none; float: left;} 
#slider ul li img{width: 600px; height: 400px;} 
.next{position: relative; left: 700px; } 
.prev{position: relative; left: 500px; } 
</style> 

</head> 
<body> 
<div id="slider"> 
    <ul> 
     <li><img src="2.jpg" /></li> 
     <li><img src="3.jpg" /></li> 
     <li><img src="4.jpg" /></li> 
     <li><img src="5.jpg" /></li> 
    </ul> 
</div> 
<button class="next">Next</button> 
<button class="prev">prev</button> 
</body> 
</html> 

JS代碼 這是其中一個按鈕正常圖像滑塊jQuery的代碼,但我試圖創建分組按鈕的代碼,但沒有獲得成功。

<script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     $(function(){ 
      var count = $("#slider ul li").length; 
      var li_w = $("#slider ul li:first").width(); 
      var ul_w = count*li_w; 
      var i = li_w; 
      $(".next").click(function(){ 
       $("#slider ul").animate({"left":-i+"px"}, 1000); 
       i+= li_w; 
       if(i==ul_w){ 
        i=0; 
       } 
      }); 

      $(".prev").click(function(){ 

      }); 
     }); 
    </script> 
+0

檢查這個參考鏈接,這將幫助你.. [點擊](http://www.uiupdates.com/create-circular-image-gallery-using-jquery /) – Uiupdates 2015-02-10 12:24:33

+0

WOW .. thanx正是我想要的.appreciated男子 – 2015-02-10 12:41:51

回答

1

我改變你的JavaScript一點,但我認爲它更符合邏輯這樣。 在這裏,你可以試一下:http://jsfiddle.net/vkk52bz2/2/

$(function(){ 
    var count = $("#slider ul li").length; 
    var li_w = $("#slider ul li:first").width(); 
    var ul_w = count*li_w; 
    var i = 0; // start with the position 0 
    $(".next").click(function(){ 
     i -= li_w; // subtract the width of a slide 
     if(i==ul_w*-1){ // check if it hit the end 
      i=0; 
     } 
     $("#slider ul").animate({"left":i+"px"}, 1000); 
    }); 

    $(".prev").click(function(){ 
     i += li_w; // add the width of a slide 
     if(i>0){ // check if it hit end 
      i= ((count-1) * li_w) * -1; 
     } 
     $("#slider ul").animate({"left":i+"px"}, 1000); 
    }); 
}); 
+0

Thanx爲您的幫助,但上一個按鈕仍然不能正常工作 – 2015-02-10 12:32:02

+0

@GauravKumar哦對不起..我應該先測試它。我更新了帖子 – BrendanMullins 2015-02-10 12:45:49

+0

我感謝您的幫助thanx會使用此代碼,因爲它最簡單...謝謝 – 2015-02-10 12:48:37

0

我測試了它和它的作品 https://jsfiddle.net/thair/s8hhz415/2/embedded/result/

HTML

<div id="slider"> 
    <ul> 
     <li><img src="http://kelmih.com/Photos/News/31.jpg" /></li> 
     <li><img src="http://kelmih.com/Photos/News/27.JPG" /></li> 
     <li><img src="http://kelmih.com/Photos/News/23.jpg" /></li> 
     <li><img src="http://kelmih.com/Photos/News/24.jpg" /></li> 
    </ul> 
</div> 
<button class="next">Next</button> 
<button class="prev">prev</button> 

CSS

#slider{overflow: hidden; width: 600px; height: 400px; position: relative; border: 4px solid #CCC; margin: auto;} 
#slider ul{padding: 0; margin: 0; width: 2400px; position: relative; top: 0; left: 0;} 
#slider ul li{list-style: none; float: left;} 
#slider ul li img{width: 600px; height: 400px;} 
.next{position: relative; left: 100px; } 
.prev{position: relative; left: 0px; } 

JS

   $(function(){ 
       var count = $("#slider ul li").length; 
       var li_w = $("#slider ul li:first").width(); 
       var ul_w = count*li_w; 
       var i = 0; 
       $(".next").click(function(){ 
        i+= li_w; 
        if(i>ul_w || i==ul_w){ 
         i=0; 
        } 
        $("#slider ul").animate({"left":-i+"px"}, 1000); 
       }); 
       $(".prev").click(function(){ 
        i-= li_w; 
        if(i<0){ 
         i=ul_w - li_w; 
        } 
        $("#slider ul").animate({"left":-i+"px"}, 1000); 
       }); 
      }); 
+0

它不工作,當我點擊下一個,然後我點擊上一個按鈕,然後它不斷減少li_w,但thanx的幫助 – 2015-02-10 12:34:48