自动 play/pause 并重启 TiltSlider

Question

我想实现滑块在鼠标悬停时暂停并在鼠标移开时恢复。

这是我自动播放滑块的代码：

<script src="<?=$prelink?>addon/slider/js/classie.js"></script>
<script src="<?=$prelink?>addon/slider/js/tiltSlider.js"></script>
<script src="<?=$prelink?>js/jslink.js"></script>
<script>
  new TiltSlider( document.getElementById( 'slideshow' ) );               
  var intervalId = window.setInterval(function timerfun(){              
    $('nav>.current').next().trigger('click');
      if($('nav > .current').next().index() == '-1'){
        $('nav > span').trigger('click');
      }
    }, 11000); 
</script>

请帮我实现这个。我试过这段代码：

$('#slideshow').on("mouseover",function(){
  clearInterval(intervalID);
});

$('.image_thumb ul li').on("mouseout",function(){
  intervalID = setInterval(cycleImage, slidetime);
});

但是代码无法正常工作，因为 TiltSlider 的行为异常。

Answer 1

此代码应完成您要执行的操作：

<script>

    new TiltSlider(document.getElementById('slideshow'));

    $(function() {

        var cycleTime = 1000;//11000;
        var intervalId;

        function cycleImage () {
            $('nav>.current').next().trigger('click');
            if ($('nav > .current').next().index() == '-1') {
                $('nav > span').trigger('click');
            }
        };

        $('#slideshow').on("mouseover", function() {
            clearInterval(intervalId);
        });

        $('#slideshow').on("mouseout", function() {
            clearInterval(intervalId);
            intervalId = setInterval(cycleImage, cycleTime);
        });

        intervalId = setInterval(cycleImage, cycleTime);
    });

</script>

自动 play/pause 并重启 TiltSlider

Auto play/pause and restart TiltSlider

javascript

jquery

slider