2

ユーザーがマウスを画像の上に置いたときにのみ画像のスライドショーを再生する最良の方法を探しています (ユーザーがマウスを画像の外に移動すると、スライドショーが再び停止します)。

以下のデモでは、ホバー機能以外はすべて必要です。

デモへのリンク

ドキュメントへのリンク

ここに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 による指摘)。

4

4 に答える 4

4

これはあなたが探しているものかもしれません: https://github.com/sladex/images-rotation

于 2013-12-24T10:09:33.563 に答える
3

これが実用的なデモです

ホバー時とclearIntervalマウスアウト時に関数を呼び出すだけです。

Jクエリ

$('.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-24T10:33:23.403 に答える
0

ユーザーがマウスを画像の上に置いたときにのみ画像のスライドショーを再生する最良の方法を探しています (ユーザーがマウスを画像の外に移動すると、スライドショーが再び停止します)。

あなたは「マウスエンター」を意味します

この例を確認してください：

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-30T22:39:43.683 に答える
0 
<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-20T06:18:45.650 に答える