jquery - 停止循环播放 CSS 和 Jquery 幻灯片

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