如何製作無限傳送帶JQuery？

我試圖讓使用JQuery無限旋轉木馬，問題是當我去它只是一個白色畫面的最終圖像，這種修復是回到以前的形象，我知道這是因爲每個圖像是在另一個之下，但我怎樣才能讓它循環，以便一旦我點擊下一個，或者至少回到前一個圖像，它會轉到第一個圖像？如何製作無限傳送帶JQuery？

var sliderList; 
 
$(function() { 
 

 
    var sliderWrapper = $("#slider"); 
 
    sliderList = sliderWrapper.children("ul"); 
 
    var sliderItems = sliderList.children("li"); 
 

 
    function animateSlider(direction, duration) { 
 
    if (direction === "+") { 
 
     sliderList.animate({ 
 
     "margin-left": "+=800px" 
 
     }, duration); 
 
    } else if (direction === "-") { 
 
     sliderList.animate({ 
 
     "margin-left": "-=800px" 
 
     }, duration); 
 
    } 
 
    } 
 

 
    $(".button").on('click', function() { 
 
    if ($(this).hasClass("back")) { 
 
     animateSlider("+", 1000); 
 
    } else { 
 
     animateSlider("-", 1000); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="slider"> 
 
    <ul> 
 
    <li><img src="img/room1.jpg" alt="hotel room" /></li> 
 
    <li><img src="img/room2.jpg" alt="hotel room" /></li> 
 
    <li><img src="img/room3.jpg" alt="hotel room" /></li> 
 
    <li><img src="img/room4.jpg" alt="hotel room" /></li> 
 
    </ul>

來源

2017-04-17 Syystole

請更新我所做的片段讓你有適當的圖像（LOREM像素）和所需的CSS - 你可能會必須看到，如果保證金左爲0，你還剩下方向，集到800 * 4，當800 * 4向右時，設爲0 – mplungjan

做一次檢查，看看是否sliderItem是列表的最後一個項目，然後使動畫爲0或視+年底或 -

$(function() { 

    var sliderWrapper = $("#slider"); 
    sliderList = sliderWrapper.children("ul"); 
    var sliderItems = sliderList.children("li"); 
    var count = 0; 

    function animateSlider(direction, duration) { 
    if (direction === "+") { 
     if(sliderItems.length === count){ 
     sliderList.animate({ 
     "margin-left": "-=2400px"//go back to original 
     }, duration); 
     }else{ 
      sliderList.animate({ 
      "margin-left": "+=800px" 
      }, duration); 
     } 
     count++; 
    }

東西像那樣。然後，只需做相反的背面

來源

2017-04-17 16:55:00

如何製作無限傳送帶JQuery？

回答

相關問題