Question

嘿，我有这个jquery滑块：

我添加了一些选项（鼠标悬停和鼠标移除），但我不知道放在那里..

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  2000);

$('#stopSlider').mouseover({
    // stop slider
})
$('#stopSlider').mouseout({
    // start slider again
})

你能看看吗？：）

问候!!

Answer 1

希望这会有所帮助： http://jsfiddle.net/Jtec5/378/

$("#slideshow > div:gt(0)").hide();

var startSlideShow = function() { 
        $('#slideshow > div:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#slideshow');
        },
    interval = setInterval(startSlideShow,  2000);

$('#stopSlide').mouseover(function() {
    clearInterval(interval);
});

$('#stopSlide').mouseout(function() {
    interval = setInterval(startSlideShow, 2000);
});

这与优雅的解决方案相去甚远，但我希望它能让您更好地了解事件处理程序和setInterval的工作方式。

Answer 2

简单地声明一个变量stopped并在鼠标悬停stopSlider-element时将其设置为true，并在它离开时将其设置为false。在setInterval-function中，将所有内容包装在if语句中，该语句检查stopped是否为真。

var stopped=false;
$("#slideshow > div:gt(0)").hide();      
setInterval(function() { 
  if(!stopped){
    $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
  }
},  2000);

$('#stopSlide').mouseover(function(){
  stopped=true;
})
$('#stopSlide').mouseout(function(){
  stopped=false;
})

Answer 3

在jQuery中同步动画的方法是使用step选项。请参阅jQuery Animate Documentation并查看选项。您可以使用回调方法同步更改其他2张幻灯片的x位置。

更好的做这样的动画的方法是CSS3，如果你的客户不支持，你可以优雅地回归到jQuery。我建议使用jQuery Transit。这将为您处理后备并保持代码清洁。

Jquery - 配置自动幻灯片

3 个答案: