javascript - 带有上一个/下一个的 jquery 自动 slider

Question

我看到很多帖子都使用 jquery/css 的 slider 。

我有一个数据库，我可以从中检索图像和文本的链接。

我想创建一个带有自动滚动的 slider 类型的最新提要部分，就像在许多网站上看到的那样。

我在 stackoverflow 上看到了这个例子 http://jsfiddle.net/uXn2p/1/

它使用 overflow 隐藏属性并为滑动设置动画。

我添加了这段代码以使其自动化。

setInterval(function() {
 $(".list").delay( 800 ).animate({scrollLeft: "+=330"}, 'slow', "swing");
  $(".list").delay( 800 ).animate({scrollLeft: "+=330"}, 'slow', "swing");


 $(".list").delay( 800 ).animate({scrollLeft: "-=990"}, 'slow', "swing");

    }, 2000);

但是一旦这个动画开始，上一个/下一个按钮就停止工作。我知道我做错了一些对 jquery 无效的事情。

这是什么？我该如何纠正它？

Answer 1

我已经对您的代码进行了相当多的调整，但我想我得到了您要找的东西。我离开了这个例子:http://jsfiddle.net/n8B2k/1/

我将 html 更改为下面的内容，但看起来一样。我还添加了功能，当它一直向左时删除“上一个”按钮，当一直向右时删除“更多”按钮(如果你不喜欢，可以删除或修改它) .

<div id="slidesContainer">
  <div id="slideInner">
    <div class="slide">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <div class="slide">
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>
    <div class="slide">
        <div class="box">7</div>
        <div class="box">8</div>
        <div class="box">9</div>
    </div>
  </div>
</div>
<div id="slideShow">
  <button class="control" id="leftControl">prev</button>
  <button class="control" id="rightControl">more</button>
</div>

这不是您使用的确切动画，但您可以修改它。

这是我的 fiddle :http://jsfiddle.net/uXn2p/124/