0

好的，所以我有这个 jQuery 和一点 css 来制作一个基本的褪色图像库。我的页面上有这个画廊类型的多个实例，但我想让它只在你将鼠标悬停在它上面时才开始。我尝试了一些悬停的东西，但没有任何乐趣。

这是我的jQuery：

$(function() {

$('.banner-item:not(:first-child)').hide();

var carousel_timer = setInterval( carousel_next, 5000 );

function carousel_next() {
    var current = $('.banner-item:visible');
    if ( current.is(':last-child') ) {
        var next = $('.banner-item:first');
    } else {
        var next = current.next();
    }
    current.stop(true, true).fadeOut(800);
    next.stop(true, true).fadeIn(800);
}

});

这是我的CSS：

    .banner {
    width: 200px;
    height: 75px;
    margin:0;
    padding:0;
    list-style:none;
    position: relative;
}

.banner-item {
    position: absolute;
    left: 0;
    top: 0;
}

这是我的html：

<ul class="banner">
    <l class="banner-item"><img src"example.jpg"></li>
    <li class="banner-item"><img src"example.jpg"></li>
    <li class="banner-item"><img src"example.jpg"></li>
    <li class="banner-item"><img src"example.jpg"></li>
</ul>
4

3 回答 3

1

为了允许它在多个实例上工作，您需要确保您引用了用户悬停的元素。

下面是使用mouseoverandmouseout启动和停止轮播的示例。对该方法的每次调用carousel_next本质上只是将另一个排队。当用户的鼠标离开.bannerdiv 时，它会重置。

(function() {
    var carousel_timer = null;
    $('.banner-item:not(:first-child)').hide();

    $('.banner').on({
        'mouseover': function() {
            var e = $(this);
            carousel_next( e );
        },
        'mouseout': function() {
            clearTimeout( carousel_timer );
        }
    });

    function carousel_next( e ) {
        var current = $(e).find('.banner-item:visible');
        if ( current.is(':last-child') ) {
            var next = $(e).find('.banner-item:first');
        } else {
            var next = current.next();
        }
        current.stop(true, true).fadeOut(800);
        next.stop(true, true).fadeIn(800);
        carousel_timer = setTimeout( function(){ carousel_next(e) }, 5000 );
    }

});
于 2013-06-21T15:58:13.760 回答
0

对 kmfk 的答案进行了轻微改动，因为它在悬停时“跳跃”并在其上方移动但仍在悬停，所以我改用悬停状态，现在它非常流畅:)

$('.thumbnail-carousel').hover(
          function(){
            var e = $(this);
            carousel_next( e );
          },
          function(){
            clearTimeout( carousel_timer );
          }
      );

    function carousel_next( e ) {
        var current = $(e).find('.thumbnail-carousel-item:visible');
        if ( current.is(':last-child') ) {
            var next = $(e).find('.thumbnail-carousel-item:first');
        } else {
            var next = current.next();
        }
        carousel_timer = setTimeout( function(){ carousel_next(e) }, 3000 );
        current.stop(true, true).fadeOut(800);
        next.stop(true, true).fadeIn(800);

    }
于 2013-06-24T11:45:48.627 回答
0

看起来您将代码放在页面上而没有任何实际触发器，因此它会立即开始。我认为你正在寻找的是一个触发器 - 在你的情况下是当鼠标第一次悬停在它上面时。

尝试这个：

function ActivateGallery() {
    $(function() {

    $('.banner-item:not(:first-child)').hide();

    var carousel_timer = setInterval( carousel_next, 5000 );

    function carousel_next() {
        var current = $('.banner-item:visible');
        if ( current.is(':last-child') ) {
            var next = $('.banner-item:first');
        } else {
            var next = current.next();
        }
        current.stop(true, true).fadeOut(800);
        next.stop(true, true).fadeIn(800);
    }

    });
}

var carouselStarted = false;
$(document).ready(function() {

    $('.banner').hover(function () {
       if(carouselStarted == false)
       {
        ActivateGallery();
        carouselStarted = true;
       }
     },
     function () {
        //mouse out code if you want it.
    });
}
});

希望这能让您至少了解我在想什么，或者让您走上正确的道路。

于 2013-06-21T16:08:28.110 回答