Javascript jquery自动滑块,带上一个/下一个
我看到很多帖子都使用jquery/css的滑块 我有一个数据库,从中检索图像和文本的链接 我想创建一个带有自动滚动的滑块类型的最新提要部分,就像在许多网站上看到的那样 我在stackoverflow上看到了这个例子 它使用溢出隐藏属性并设置滑动动画 我添加了这段代码以使其自动化Javascript jquery自动滑块,带上一个/下一个,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,我看到很多帖子都使用jquery/css的滑块 我有一个数据库,从中检索图像和文本的链接 我想创建一个带有自动滚动的滑块类型的最新提要部分,就像在许多网站上看到的那样 我在stackoverflow上看到了这个例子 它使用溢出隐藏属性并设置滑动动画 我添加了这段代码以使其自动化 setInterval(function() { $(".list").delay( 800 ).animate({scrollLeft: "+=330"}, 'slow', "swing"); $(".list"
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无效的事情
这是什么?
如何更正它?我修改了这个示例。希望它能帮助你解决你的问题
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);
});
我已经对你的代码做了很多调整,但我想我得到了你想要的。我举了一个例子: 我在下面将html改为这样,但看起来是一样的。我还添加了一个功能,可以在“prev”按钮一直向左时删除它,在“more”按钮一直向右时删除它(如果您不喜欢,可以删除或修改它)
1.
2.
3.
4.
5.
6.
7.
8.
9
上
更多
它不是您使用的确切动画,但您可以修改它
这是我的小提琴:
<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>