Question

好的，所以我有这个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>

Answer 1

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

以下是使用mouseover和mouseout启动和停止轮播的示例。每次调用carousel_next方法基本上只是排队另一个。当用户的鼠标离开.banner div时，它会重置。

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

});

Answer 2

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

试试这个：

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

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

Answer 3

略微改变了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);

    }

jQuery gallery悬停问题

3 个答案: