带有上一个/下一个的jquery自动滑块
jquery auto slider with prev/next
我看到很多使用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);
});
相关文章:
- 简单的垂直上一个和下一个按钮代码点击上下移动jQuery
- 当两个单独的单词被放在目标上时,使用Jquery获取一个值
- 用键盘分页jQuery下一个和上一个控件.触发器('点击')不'不起作用
- JQuery关注上一个点击的输入错误
- JQuery.删除DOM树中的上一个同级
- 上一个函数完成后,javascript/jQuery调用execute函数
- jQuery UI 选项卡取消选择事件或在选择时保存上一个选项卡
- jQuery UI 选项卡 - 将参数设置为下一个/上一个按钮单击
- 获取上一个元素 jQuery 的内容
- 获取下一个或上一个隐藏元素的高度,以设置父元素的高度.jquery.
- 遍历下一个和上一个 jQuery 选项卡
- JQuery,引导导航 - 如何添加上一个/下一个按钮
- jQuery网站的键盘快捷键,焦点使用左键和右键转到上一个或下一个元素
- 如何使用 jQuery 选择上一个 LI
- Jquery上一个对象选择器
- Jquery下一个和上一个按钮循环函数
- jquery scrolltop()返回上一个滚动位置的值
- 使jQuery图像滑块停止在最后一个图像,并添加下一个和上一个按钮
- Jquery UI选项卡&选择方框-下一个/上一个按钮
- Fullcalendar jQuery上一个和下一个按钮