jquery圖像滑塊前一個按鈕

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>

來源

2015-02-10 Gaurav Kumar

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

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

我改變你的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); 
    }); 
});

來源

2015-02-10 12:27:45 BrendanMullins

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

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

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

我測試了它和它的作品 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); 
       }); 
      });

來源

2015-02-10 12:23:52 Thair

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

jquery圖像滑塊前一個按鈕

回答

相關問題