Question

我是JQuery的新手，不知道如何阻止我的jquery和css幻灯片循环。这是所有语法：

HTML：

<div id="slideshow">
  <div>
    <img src="Slide1.gif">     
  </div>
  <div>
    <img src="Slide2.gif">
  </div>
  <div>
    <img src="Slide3.gif">
  </div>
</div>

CSS：

#slideshow { 
margin: 50px auto; 
position: relative; 
width: 755px; 
height: 410px; 
padding: 10px; 
box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
position: absolute; 
top: 10px; 
left: 10px; 
right: 10px; 
bottom: 10px; 
}

jQuery的：

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
$('#slideshow > div:first')
.fadeOut(2000)
.next()
.fadeIn(2000)
.end()
.appendTo('#slideshow');
},  3000);

有人可以请我吗？任何人将不胜感激。提前谢谢。

Answer 1

声明分配给区间函数的变量

var slideshowInterval = setInterval(function() { 
$('#slideshow > div:first')
.fadeOut(2000)
.next()
.fadeIn(2000)
.end()
.appendTo('#slideshow');
},  3000);

所以当你想要停止它时，只需调用clearInterval函数：

clearInterval(slideshowInterval);

http://www.w3schools.com/js/js_timing.asp

停止CSS＆amp;循环播放Jquery幻灯片

1 个答案: