簡單的JQuery滑塊無法正常工作

Question

我是jQuery和javascript的新手，我正在制作一些動畫來練習我的新技能。 以下代碼是一個簡單的滑塊，可以使用setInterval（）循環瀏覽4張幻燈片，也可以在單擊時進行導航。 除了第一張或最后一張幻燈片處於活動狀態並單擊按鈕時，該滑塊均能正常工作。 在這種情況下，滑塊會在循環回顯之前顯示空白幻燈片。 當左空白邊距等於-2880px時，我嘗試操縱ul點擊，但沒有成功。 這是我的代碼：

 var i = 0; $(document).ready(function() { setInterval(function() { $("#my-slider").animate({"margin-left": "-=720px"}, 1000, function(){ i++; if( i === 4 ) { i = 0; $("#my-slider").css("margin-left", 0); } }); }, 5000); }) $(document).ready(function() { $(".right").click(function() { $("#my-slider").animate({"margin-left": "-=720px"}, 1000); }); $(".left").click(function() { $("#my-slider").animate({"margin-left": "+=720px"}, 1000); }); }); 

 .slider-wrapper { width: 50%; height: 400px; margin: 0 auto; overflow: hidden; } .slider-wrapper ul { list-style-type: none; width: 3600px; max-width: 3600px; height: 400px; padding: 0; margin: 0; } .slider-wrapper li { float: left; width: 720px; height: 400px; } #slide1 { background: #04151F; } #slide2 { background: #183A37; } #slide3 { background: #EFD6AC; } #slide4 { background: #C44900; } #slide5 { background: #04151F; } .left, .right { font-size: 40px; z-index: 1; position: fixed; float: right; margin: -15% 0 0 0.5%; cursor: pointer; color: #FFF; } .right { margin-left: 47%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slider-wrapper"> <ul id="my-slider"> <li id="slide1"></li> <li id="slide2"></li> <li id="slide3"></li> <li id="slide4"></li> <li id="slide5"></li> </ul> <p class="left">&larr;</p> <p class="right">&rarr;</p> </div> 

謝謝您的幫助。

Answer 1

您還需要將循環代碼用於按鈕。

$(document).ready(function() {
$(".right").click(function() {
    $("#my-slider").animate({"margin-left": "-=720px"}, 1000, function(){
    i++; 
        if( i === 4 ) {
          i = 0; 
           $("#my-slider").css("margin-left", 0); 
        }
  });   
});

Answer 2

我認為這是最簡單的解決方案！

https://jsfiddle.net/nbLz6zzb/1/

 var i = 0; $(document).ready(function() { setInterval(function() { $("#my-slider").animate({"margin-left": "-=720px"}, 1000, function(){ i++; if( i === 4 ) { i = 0; $("#my-slider").css("margin-left", 0); } }); }, 5000); ///////////////////////////////////// $(".right").click(function() { $("#my-slider").animate({"margin-left": "-=720px"}, 1000, function(){ i++; if( i === 4 ) { i = 1; $("#my-slider").css("margin-left", 0); } }); }); $(".left").click(function() { if ( $("#my-slider").css("margin-left") <= '720px' && $("#my-slider").css("margin-left") >= '0px') { $("#my-slider").animate({"margin-left": "-2880px"}, 1000); } else { $("#my-slider").animate({"margin-left": "+=720px"}, 1000); } }); }); 

 .slider-wrapper { width: 50%; height: 400px; margin: 0 auto; overflow: hidden; } .slider-wrapper ul { list-style-type: none; width: 3600px; max-width: 3600px; height: 400px; padding: 0; margin: 0; } .slider-wrapper li { float: left; width: 720px; height: 400px; } #slide1 { background: #04151F; } #slide2 { background: #183A37; } #slide3 { background: #EFD6AC; } #slide4 { background: #C44900; } #slide5 { background: #04151F; } .left, .right { font-size: 40px; z-index: 1; position: fixed; float: right; margin: -15% 0 0 0.5%; cursor: pointer; color: #FFF; } .right { margin-left: 47%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slider-wrapper"> <ul id="my-slider"> <li id="slide1"></li> <li id="slide2"></li> <li id="slide3"></li> <li id="slide4"></li> <li id="slide5"></li> </ul> <p class="left">&larr;</p> <p class="right">&rarr;</p> </div>