Question

我目前正在使用http://www.convergent-evolution.co.uk/resources/jquery-plugins/scrolling-carousel/作为插件，我想执行以下操作：

    $('#carousel-demo1').scrollingCarousel
            (
                {
                    autoScroll: false,
                    autoScrollDirection: 'left',
                }
            );

            $('#carousel-demo2').scrollingCarousel
            (
                {
                    autoScroll: false,
                    autoScrollDirection: 'right',
                }
            );

            $('#carousel-demo3').scrollingCarousel
            (
                {
                    autoScroll: false,
                    autoScrollDirection: 'left',
                }
            );
            $('#carousel-demo4').scrollingCarousel
            (
                {
                    autoScroll: false,
                    autoScrollDirection: 'right',
                }
            );

这是我用来启动插件的代码，它可以运行。但是，我希望当其中一个列表悬停时，所有这些列表都开始移动而不仅仅是我正在盘旋的那个列表。我试图做的事情：

    $(document).ready(function()
    {       
        $('ul').mouseover(function() 
        {
            $('#carousel-demo1').scrollingCarousel
            (
                {
                    autoScroll: true,
                    autoScrollDirection: 'left',
                }
            );

            $('#carousel-demo2').scrollingCarousel
            (
                {
                    autoScroll: true,
                    autoScrollDirection: 'right',
                }
            );

            $('#carousel-demo3').scrollingCarousel
            (
                {
                    autoScroll: true,
                    autoScrollDirection: 'left',
                }
            );
            $('#carousel-demo4').scrollingCarousel
            (
                {
                    autoScroll: true,
                    autoScrollDirection: 'right',
                }
            );
        });

        $('ul').mouseleave(function() 
        {
            $('#carousel-demo1').scrollingCarousel
            (
                {
                    autoScroll: false,
                    autoScrollDirection: 'left',
                }
            );

            $('#carousel-demo2').scrollingCarousel
            (
                {
                    autoScroll: false,
                    autoScrollDirection: 'right',
                }
            );

            $('#carousel-demo3').scrollingCarousel
            (
                {
                    autoScroll: false,
                    autoScrollDirection: 'left',
                }
            );
            $('#carousel-demo4').scrollingCarousel
            (
                {
                    autoScroll: false,
                    autoScrollDirection: 'right',
                }
            );
        });

但这不起作用。那我怎么能这样做呢？

Answer 1

使用.hover()函数怎么样？

$( "ul" ).hover(function() {
 // add functions here
});

Answer 2

为您的所有li提供课程，例如：

HTML：

<ul>
    <li class="demo"></li>
    <li class="demo"></li>
    <li class="demo"></li>
</ul>

JQUERY：

$('.demo').on('mouseover', function(){
    $('.demo').scrollingCarousel
     (
         {
             autoScroll: true,
             autoScrollDirection: 'left',
         }
     );
});

如何将插件应用于所有div

2 个答案: