Question

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

下面的演示完成了我需要的所有功能，但悬停功能。

链接到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)').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

这是 Working demo

您只需在hover上调用该函数，在mouseOut上调用clearInterval。

<强> 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

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

你的意思是“mouseenter”

检查此示例：

<强> 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

悬停开始一个简单的幻灯片放映

4 个答案: