Jquery - 配置自动滑动答案

【问题标题】：Jquery - Configure auto slideJquery - 配置自动滑动
【发布时间】：2014-03-09 22:58:48
【问题描述】：

嘿，我得到了这个 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
})

你能看一下吗？ :)

你好！！

【问题讨论】：

标签： javascript jquery slider slide sliding

【解决方案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 的工作原理。

【讨论】：

【解决方案2】：

只需声明一个变量stopped 并在鼠标悬停在stopSlider 元素上时将其设置为true，在鼠标离开它时将其设置为false。在 setInterval 函数中，将所有内容包装在一个 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;
})

【讨论】：

【解决方案3】：

在 jQuery 中同步动画的方法是使用 step 选项。请参阅jQuery Animate Documentation 并查看选项。你可以有一个回调方法来同步改变另外两张幻灯片的 x 位置。

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

【讨论】：