Question

我正在使用Jquery循环并让它连续水平滚动。我希望动画在用户悬停时停止。我通过插件的“pause：1”选项进行了这种工作分类，但是在它循环到下一个图像之前它没有暂停，这很慢。我想在用户徘徊时暂停动画中期，所以即使它在图像之间，也可以在mouseout上恢复。这可能吗？

我的代码：

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

如何暂停Jquery Cycle插件中期动画（悬停时）

2 个答案: