Jquery 自动图像 slider

Question

我有一个基本的 jQuery 图像 slider (下面的代码)，它会在计时器上自动滑动。我希望它循环播放，但它在最后一张幻灯片之后卡住了。我刚开始使用 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) {