jquery - 如何暂停 Jquery Cycle 插件中间动画（悬停时）

Question

我正在使用 Jquery 循环并让它连续水平滚动。我希望动画在用户悬停时停止。我通过插件的“暂停：1”选项有这个工作排序，但它不会暂停，直到它循环到下一个图像，这很慢。我希望它在用户悬停时暂停动画中间，所以即使它在图像之间的中间，然后在鼠标悬停时恢复。这可能吗？

我的代码：

$('.gallery .continuous').each(function(index, element) {   
    $(element).cycle({ 
        fx:'scrollHorz',                
        continuous: 1,
        speed:10000,
        timeout:0,
        easing: 'linear',
        pause:1,
        pauseOnPagerHover: true,
    });
});

谢谢你的帮助。

Answer 1

嗨 Desmond，你可以在你的 javascript 中试试这个。将其放入准备好的文件中

    $('.gallery .continuous').hover(
function(){
$(this).cycle('pause');  //Pauses the cycle on hover
},
function(){
$(this).cycle('resume'); // Resumes the cycle when mouse is outside div
});

我希望它对你有用。

Answer 2

<div id="slider">
        <img class="images" src="1.jpg">
        <img class="images" src="2.jpg">
        <img class="images" src="3.jpg">
        <img class="images" src="4.jpg">
    </div>

<!-- for example above mentioned is your html with container with id "slider"

then cycle code will be like that -->


    <script>
    //this is your cycling code!!!!!!!!!!!!!!!
      $('#slider').cycle({ 
        fx:      'scrollHorz', 
        timeout:   200,
        speed:   1000,
        next: '.right',
        prev: '.left'
    });

//if you want to pause you need to use .cycle("pause") for e.g:

//on mouseover.

        $('#slider').mouseover(function(){
            $('#slider').cycle('pause');
        });


    //and continue on mouse out

        $('#slider').mouseout(function(){
            $('#slider').cycle('resume');
        });

    </script>