悬停开始一个简单的幻灯片 [英] Hover starts a simple slideshow

问题描述

我在寻找只有在将鼠标悬停在图片上方时才播放图片幻灯片的最佳方式（当用户将鼠标移到图片外部时，幻灯片再次停止）。

链接到 demo

链接到文档

以下是html

 < div class =fadein> 
< img src =http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg> 
< img src =http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg> 
< img src =http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg> 
< / div> 
  

和jQuery

  $（function（）{
 $（'）; fadein img：gt（0）'） .fadein：first-child'）。fadeOut（）
 .next（'img'）。fadeIn（）
 .end（）。appendTo（'。fadein'）;}，
 3000）; 
}）; 
  

此外，我正在寻找增加幻灯片速度的最佳方法，降低3000到1000，

/ F4peh / 38 /rel =nofollow>工作演示

所有您需要做的就是调用hover clearInterval 。

Jquery

  $（'。fadein img：gt（0）'）。 
 $（。fadein）。hover（function（）{
 timer = setInterval（function（）{$（'。fadein：first-child'）。fadeOut（）
。 next（'img'）。fadeIn（）
 .end（）。appendTo（'。fadein'）;}，
 1000）; 
}，function（）{
 clearInterval（timer）; 
}）; 
  

I'm looking for the best way to only play an image slideshow when a user hovers the mouse over the image (slideshow again stops when user moves the mouse outside the image).

The demo below does everything I need but the hover functionality.

Link to demo

Link to documentation

Here is the html

<div class="fadein">
<img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>

and jQuery

 $(function(){
 $('.fadein img:gt(0)').hide();
 setInterval(function(){
 $('.fadein :first-child').fadeOut()
 .next('img').fadeIn()
 .end().appendTo('.fadein');}, 
 3000);
 });

Also I'm looking for the best way to increase the slideshow speed, decreased 3000 to 1000,(pointed out by RUJordan)

解决方案

Here is a Working demo

All you have to do is, call the function on hover and clearInterval on mouseOut.

Jquery

$('.fadein img:gt(0)').hide();
$(".fadein").hover(function(){
timer = setInterval(function(){   $('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');},             
1000);
}, function() {
clearInterval(timer);
});

这篇关于悬停开始一个简单的幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！