javascript - 简单的 JQuery slider 无法正常工作

Question

我是 jQuery 和 javascript 的新手，我正在制作一些动画来练习我的新技能。以下代码是一个简单的 slider ，它使用 setInterval() 在 4 个幻灯片之间循环，也可以在单击时导航。除了第一张或最后一张幻灯片处于事件状态并且单击按钮时， slider 工作正常。在这种情况下， slider 在循环返回之前显示空白幻灯片。当 margin-left 等于 -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

我认为这是最简单的解决方案!

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>