无限水平滑块在悬停时显示多个幻灯片以及暂停动画

Question

我正在尝试制作一个从右向左滑动并一次显示4张幻灯片的无限滑块。 我的意思是无限的东西，例如当幻灯片1隐藏时，它会移动到最后一张幻灯片的末尾。

这是我的HTML：

<div id="slider">
    <div class="slide">slide 1</div>
    <div class="slide">slide 2</div>
    ... up to slide 6
</div>

我是jquery的新手，所以我对如何完成此工作没有明确的想法。

• 我认为滑动应该在setInterval（）内部。
• 将animate（）用于左边缘的动画。 为左边距设置负值以将其向左滑动并隐藏。
• 获取隐藏的幻灯片并将其移到最后

jQuery的：

var currentSlide = 0;
setInterval(function(){
    $('.slide').animate({marginLeft:-$('.slide').width()});     
    $('.slide').eq(currentSlide++).insertAfter($('.slide').last())
}, 2000);

每张幻灯片均包含带有背景图像的文本。 这就是我现在所拥有的，滑动很丑。 我还想设置要在jquery中显示的数量，这样就不必编辑CSS，而且我还想在鼠标悬停时集成诸如暂停之类的内容。 请帮忙，谢谢。

Answer 1

我认为您对如何完成此工作有个好主意。 但是您的代码需要更正。

您正在为所有'.slide'动画，因为它们都是内联的，所以您只需要为第一张幻灯片制作动画，之后的所有内容都将紧随其后：

$('.slide').first().animate({marginLeft:-$('.slide').width()});

而且您还同时在制作动画和移动它。 动画完成后，只需移动它即可。

$('.slide').first().animate({
    marginLeft:-$('.slide').width()
}, 'slow', function(){
    //once completely hidden, move this slide next to the last slide
    //and reset the margin-left to 0
    $(this).appendTo($(this).parent()).css({marginLeft: 0});       
});

这是jsfiddle 。

---

要解决滑动问题，我们需要为幻灯片添加包装纸，并根据所有幻灯片的总宽度设置其宽度。

新标记：

<div id="slider">
    <div id="slide-container">
        <div class="slide">slide 1</div>
        <div class="slide">slide 2</div>
    </div>
</div>

jQuery的：

var w = $('#slider').width() / 4;
var l = $('.slide').length;
//set each slide width
$('.slide').width(w);  
//set the container width to fix the animation sliding issue
$('#slide-container').width(w * l)

要在鼠标悬停时添加暂停，只需清除clearInterval并将其重置即可继续：

function slider(){
    $('.slide').first().animate({
        marginLeft: -w 
    }, 'slow', function () {
        $(this).appendTo($(this).parent()).css({marginLeft: 0});
    });
}

//setInterval on DOM ready
var timer = setInterval(slider, 2000);

$('#slider').hover(function(){
    //mouse in, clearinterval to pause
    clearInterval(timer);
},function(){
    //mouse out, setinterval to continue
    timer = setInterval(slider, 2000);
});

请参阅此更新的jsfiddle 。