带有上一个/下一个的jquery自动滑块 - jquery auto slider with prev/next

jquery auto slider with prev/next

本文关键字：jquery 上一个下一个 | 更新日期: 2023-09-27

我看到很多使用jQuery/CSS的滑块的帖子。

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

我想创建一个具有自动滚动功能的滑块类型的最近提要部分，就像在许多网站上看到的那样。

我在堆栈溢出 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无效。

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

我已经调整

了你的代码很多，但我想我得到了你要找的东西。我放弃了这个例子：http://jsfiddle.net/n8B2k/1/

我将 html 更改为下面的这个，但它看起来是一样的。我还添加了在"prev"按钮一直向左时删除"prev"按钮的功能，并在一直向右时删除"更多"按钮的功能（如果您不喜欢它，可以删除或修改它）。

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

我 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);
});