懸停開始簡單的幻燈片

我正在尋找當用戶將鼠標懸停在圖像上時僅播放圖像幻燈片的最佳方式（當用戶將鼠標移到圖像之外時，再次停止幻燈片放映）。懸停開始簡單的幻燈片

下面的演示程序可以滿足我需要的所有功能，但懸停功能。

鏈接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，（由R指出UJordan）

來源

2013-09-30 Mills

如果你認爲它應該做的伎倆，採取代碼你爲什麼不問之前嘗試嗎？（並減少數量，不要增加） –

你解決了這個問題嗎？ –

是的，但我用https://github.com/sladex/images-rotation去了 – Mills

我正在尋找當用戶將鼠標懸停在圖像上時只播放圖像幻燈片的最佳方式（當用戶將鼠標移動到圖像之外時，再次停止幻燈片放映）。

你的意思是「的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'); 
    }); 

});

來源

2013-09-30 22:39:43

有沒有什麼辦法讓幻燈片連續播放，而不必每次換畫面時都要將鼠標重新輸入到div中？ – Mills

這可能是你在找什麼：

來源

2013-12-24 10:09:33 Sladex

這裏是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); 
});

來源

2013-12-24 10:33:23

這是一個很好的解決方案，但在Firefox中，幻燈片不會停止在mouseleave事件中。 – h0nzan

這是我修改的解決方案，適用於Firefox。 http://jsfiddle.net/F4peh/217/ – h0nzan

<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

來源

2016-01-20 06:18:45 Chandresh

懸停開始簡單的幻燈片

回答

相關問題