帶有上一個/下一個的jQuery自動滑塊

Question

我看到許多使用jquery / css的帶有滑塊的帖子。

我有一個數據庫，可以從中檢索圖像和文本的鏈接。

我想創建一個具有自動滾動功能的滑塊類型的最新Feed部分，就像在許多網站上看到的那樣。

我在stackoverflow http://jsfiddle.net/uXn2p/1/上看到了這個示例

它使用溢出隱藏屬性並為滑動動畫。

我添加了這段代碼以使其自動化。

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更改為以下內容，但外觀相同。 我還添加了刪除“ prev”按鈕到最左側的功能，以及刪除“ more”按鈕到最右側的功能（如果不喜歡，可以刪除或修改它） 。

<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>

它不是您使用的確切動畫，但是您可以對其進行修改。

這是我的小提琴： http : //jsfiddle.net/uXn2p/124/

Answer 2

我修改了這個示例http://jsfiddle.net/uXn2p/1/ 。 希望它能幫助您解決問題。

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

$("#more").click(function() {
    clearInterval(myVar);
    $(".list").animate({scrollLeft: "+=330"}, 300, "swing");
    myVar = setInterval(function() {
        $(".list").delay(800).animate({scrollLeft: "+=330"}, 'slow', "swing");
    }, 2000);
});

$("#prev").click(function() {
    clearInterval(myVar);
    $(".list").animate({scrollLeft: "-=330"}, 300, "swing");
    myVar = setInterval(function() {
        $(".list").delay(800).animate({scrollLeft: "+=330"}, 'slow', "swing");
    }, 2000);
});