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

如何制作这些按钮，以便在单击“向左”按钮时，section元素将动画回到上一篇文章？

Answer 1

我认为您最好在活跃的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来相应地设置下一篇文章的动画。我希望这是一个很好的起点。

导航按钮水平循环功能

1 个答案: