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);

  })

我想让它从mouseover事件开始（而不是自动运行），我想我应该使用setTimeout但我无法解决它！

Answer 1

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

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

Answer 2

试试这个：

$(document).ready(function() {
  $('#portfolio_slider').on('mouseenter', slideImages);
});

幻灯片开始onmouseover

2 个答案: