Jquery自动图像滑块 [英] Jquery automatic image slider

问题描述

我有一个基本的jQuery图像滑块（下面的代码）在计时器自动滑动。我想让它循环，但它在最后一张幻灯片后卡住。我刚刚开始使用jQuery，所以可能会缺少一些明显的东西，但我不能解决出什么问题！

  $ ）; .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宽度和速度$ slide.animate（{'margin-left'：' -  ='+ width}，speed，function（）{//计算幻灯片的数量，并从上一个当前的++循环回第一个; === $ slides.length）{current = 1; $ slides.css（'margin-left'，0）;}}）;}，pause）;}）;}）;  / pre> 
  #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>  
 

解决方案

你有一点错误。 $ slides.length是1，因为只有一个div与该id。因此，你真正想要使用的是$ slide.length在你的if语句。因为您的网页上有多少张幻灯片。所以如果你改变你的if语句如下，它应该工作：

  if（current === $ slide.length）{
  

i have a basic jQuery image slider (code below) which slides automatically on a timer. I'd like it to loop but it's getting stuck after the last slide. I'm just starting out with jQuery so may be missing something obvious but I can't work out what's going wrong! Can anyone help please?

Here's the code...

$(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>

解决方案

you have a little mistake. $slides.length is 1 because there is only 1 div with that id. Therefore, what you really want to use is $slide.length in your if statement. Because there are that number of slides on your page. So if you change your if statement as follows it should work:

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

这篇关于Jquery自动图像滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！