jquery - 导航按钮水平循环功能

Question

我有一个部分元素，它的宽度是窗口宽度的 5 倍。它通过循环函数向左滑动 1 个窗口宽度。这工作得很好，但我想要两个箭头按钮，以便用户可以交互并决定他想看到什么。如何使用 jQuery 创建这些按钮？

这是我的 HTML 代码：

<a href="#" id="left"></a>
<a href="#" id="right"></a>
<section>
    <article id="a1">
        ...
    </article>

    <article id="a2">
        ...
    </article>

    <article id="a3">
        ...
    </article>
</section>

循环动画的 jQuery 函数是这样的：

var breedte = $(window).width();
function animateSection() {

    $('section').delay(5000).animate({ marginLeft: (-breedte) }, 1000)          
    .delay(5000).animate({ marginLeft: -(breedte*2) }, 1000)                
    .delay(5000).animate({ marginLeft: -(breedte*3) }, 1000)
    .delay(5000).animate({ marginLeft: -(breedte*4) }, 1000)        
    .delay(5000).animate({ marginLeft: -(breedte*5) }, 1000)            
    .delay(500).animate({ marginLeft: 0}, 10);

    animateSection();
}

animateSection();

我怎样才能制作这些按钮，以便当我单击“左”按钮时，部分元素将动画回到上一篇文章？

Answer 1

我认为你最好active在 active中添加一个新类article。

var breedte = $(window).width();
function animateSection() {
    var current = $('article.active').removeClass('active');
    var prev = current.prev();
    var next = current.next().addClass('active');
    $(current).animate({ marginLeft: (-$(window).width()) }, 1000);
    $(next).css({ marginLeft: ($(window).width()) }).animate({marginLeft: 0 }, 1000);
}
$('article').first().addClass('active');
setInterval(animateSection,5000);

您的“上一个”和“下一个”按钮将调用animateSection相应的动画下一篇文章。我希望这是一个好的起点。