jQuery库悬停问题

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

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

下面是使用

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

});

---

看起来您将代码放在页面上，而没有任何实际触发器，因此它将直接启动。我想你要找的是一个触发器——在你的例子中，就是鼠标第一次悬停在它上面的时候

试试这个：

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

---

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

对kmfk的回答做了一点修改，因为它在悬停上“跳跃”并移动，但仍然悬停，所以我使用了悬停状态，现在它非常平滑：）

---

您研究过.hover（）jquery调用了吗？非常感谢你。这是一种享受！我想我做得不对。再次感谢

$('.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);

    }