jquery - 悬停开始一个简单的幻灯片

Question

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

下面的演示做了我需要的一切，除了悬停功能。

演示链接

链接到文档

这是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)').hide();
 setInterval(function(){
 $('.fadein :first-child').fadeOut()
 .next('img').fadeIn()
 .end().appendTo('.fadein');}, 
 3000);
 });

此外，我正在寻找提高幻灯片速度的最佳方法，从 3000 减少到 1000，（由 RUJordan 指出）

Answer 1

这可能是您正在寻找的： https ://github.com/sladex/images-rotation

Answer 2

这是一个工作演示

您所要做的就是在悬停和clearIntervalmouseOut 上调用该函数。

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);
});

Answer 3

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

你的意思是“鼠标输入”

检查这个例子：

http://jsfiddle.net/F4peh/1/

$(document).ready(function(){

    $('.fadein img:gt(0)').hide();

    $(".fadein").mouseenter(function(){
           $('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
    });

});

Answer 4

<script type="text/javascript" src="js/cycle.js"></script>  // Download cycle.js from here http://jquery.malsup.com/cycle/
<script type="text/javascript">
jQuery(function($){

    // Cycle plugin
    $('.slides').cycle({
        fx:     'none',
        speed:   1000,
        pager:  '#nav',
        timeout: 70
    }).cycle("pause");

    // Pause & play on hover
    $('.slideshow-block').hover(function(){
        $(this).find('.slides').addClass('active').cycle('resume');

    }, function(){
        $(this).find('.slides').removeClass('active').cycle('pause').cycle(0);
    });

});
</script>

<div class="product-img slideshow-block">
     <div class="slides">
        <img src="http://yoursite.com/slide1.jpg" />
        <img src="http://yoursite.com/slide2.jpg" />
        <img src="http://yoursite.com/slide3.jpg" />
     </div>
</div>

从此链接获取代码http://chandreshrana.blogspot.in/2016/01/image-slide-start-on-mouse-hover-jquery.html