Jquery自动图像滑块

Question

我有一个基本的jQuery图像滑块（下面的代码），可以在计时器上自动滑动。我希望它循环，但它在最后一张幻灯片后卡住了。我刚刚开始使用jQuery，所以可能会遗漏一些明显的东西，但我无法弄清楚出了什么问题！有人可以帮忙吗？

这是代码......

$(document).ready(function() {

//INDEX IMAGES SLIDER
    $(function() {

		//configuration
		var width = 720;
		var speed = 1000;
		var pause = 3000;
		var current = 1;

		//cache DOM
		var $slider = $('#slider');
		var $slides = $slider.find('#slides');
		var $slide = $slides.find('.slide');


	setInterval(function() {
            //move image the defined width and speed to the left
	    $slides.animate({'margin-left': '-='+width}, speed, function() {
            //count number of slides and loop back to first from last
			current++;
			if (current === $slides.length) {
				current = 1;
				$slides.css('margin-left', 0);
			}
		});			
	}, pause);
    });
});

#slider {
	width: 720px;
	height: 400px;
	overflow: hidden;
}

#slider #slides {
	display: block;
	width: 2880px;
	height: 400px;
	margin: 0;
	padding: 0;
}

#slider .slide {
	float: left;
	list-style: none;
	height: 400px;
	width: 720px;
}

#slider .slide img {
	width: 100%;
}

<div id="slider">
  
	<ul id="slides">
      
		<li class="slide"><img src="images/sp_1.png"></li>
		<li class="slide"><img src="images/ss_1.jpg"></li>
		<li class="slide"><img src="images/sd_1.jpg"></li>
		<li class="slide"><img src="images/sp_1.png"></li>
      
	</ul>
  
</div>

Answer 1

你有一点错误。 $ slides.length是1，因为只有1个div具有该id。因此，您真正想要使用的是if语句中的$ slide.length。因为页面上有这么多幻灯片。因此，如果您按如下所示更改if语句，它应该可以工作：

if (current === $slide.length) {