javascript - 鼠标悬停时开始幻灯片放映

Question

我有一个简单的幻灯片脚本，它运行一次并在最后一张图像上停止:

function slideImages(){
  var $active = $('#portfolio_slider .active');
  var $next = ($('#portfolio_slider .active').next().length > 0) ? $('#portfolio_slider .active').next() : $('#portfolio_slider img:first');
  $next.css('z-index',2);
  $active.css('z-index',1);
  $next.animate({left:0},"slow",function(){

          $next.addClass('active');
    });
}

$(document).ready(function(){
  // run every 1s
  setInterval('slideImages()', 1000);

  })

我希望它在鼠标悬停事件时启动(而不是自动运行)，我想我应该使用 setTimeout 但我无法解决!

Answer 1

只需添加一个触发间隔的事件而不是 DOM 就绪:

$(document).ready(function(){
    // run every 1s
    $('#portfolio_slider').on('mouseover', function(){
        setInterval(slideImages, 1000);
        $(this).off('mouseover');
    })
})