簡單的JQuery滑塊不能正常工作

Question

我是新來的jQuery和JavaScript，我正在研究一些動畫來練習我的新技能。以下代碼是一個簡單的滑塊，它使用setInterval（）循環訪問4張幻燈片，並且也可以單擊進行導航。除了第一張或最後一張幻燈片處於活動狀態並單擊按鈕時，滑塊工作正常。在這種情況下，滑塊在返回之前顯示空白滑塊。我嘗試在左側的margin-left等於-2880px時單擊操作ul，但沒有取得任何成功。這裏是我的代碼：

var i = 0; 
 

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

 
$(".left").click(function() { 
 
\t $("#my-slider").animate({"margin-left": "+=720px"}, 1000); 
 
    }); 
 
});

.slider-wrapper { 
 
\t width: 50%; 
 
\t height: 400px; 
 
\t margin: 0 auto; 
 
\t overflow: hidden; 
 
} 
 

 
.slider-wrapper ul { 
 
\t list-style-type: none; 
 
\t width: 3600px; 
 
\t max-width: 3600px; 
 
\t height: 400px; 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 

 
.slider-wrapper li { 
 
\t float: left; 
 
\t width: 720px; 
 
\t height: 400px; 
 
} 
 

 
#slide1 { 
 
background: #04151F; 
 
} 
 

 
#slide2 { 
 
\t background: #183A37; 
 
} 
 

 
#slide3 { 
 
\t background: #EFD6AC; 
 
} 
 

 
#slide4 { 
 
\t background: #C44900; 
 
} 
 

 
#slide5 { 
 
\t background: #04151F; 
 
} 
 

 
.left, .right { 
 
\t font-size: 40px; 
 
\t z-index: 1; 
 
\t position: fixed; 
 
\t float: right; 
 
\t margin: -15% 0 0 0.5%; 
 
\t cursor: pointer; 
 
\t color: #FFF; 
 
} 
 

 
.right { 
 
\t margin-left: 47%; 
 
}

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

謝謝您的幫助。

Answer 1

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

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() { 
 

 
\t if ($("#my-slider").css("margin-left") <= '720px' && $("#my-slider").css("margin-left") >= '0px') { 
 
\t \t $("#my-slider").animate({"margin-left": "-2880px"}, 1000); 
 
\t } else { 
 
\t \t $("#my-slider").animate({"margin-left": "+=720px"}, 1000); 
 
\t } 
 

 
    }); 
 

 

 
});

.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 2

您還需要使用循環中的代碼作爲按鈕。

$(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); 
     } 
    }); 
});