Jquery滑块按相反顺序排列
提问于 2014-06-09 23:01:16
这是jquery图像滑块的代码。
$(".Slider > div:gt(0)").hide();
function slideLoop() {
$('.Slider > div:first')
.next()
.show()
.end()
.appendTo('.Slider');
}
slideLoop();
setInterval(slideLoop, 3000);
$('.right').click(
slideLoop
)我在做控制按钮。向右滑动是有效的。如何制作幻灯片左函数？
提前谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-06-10 00:01:10
试试这个..。
HTML代码
<div id="img-grp-wrap">
<div class="img-wrap">
<img src="http://www.pictures-of-cats.org/images/ragdoll-cat-small-pictures-of-cats.jpg" />
<img src="http://0.tqn.com/d/paganwiccan/1/G/T/1/-/-/BlackCat.jpg" />
<img src="http://2.bp.blogspot.com/-H_iTYn3QQOk/Tfp5aK2vi5I/AAAAAAAAABM/QM45bNOM4HY/s1600/cat-claw.jpg" />
<img src="http://www.pictures-of-cats.org/images/Pixiebob-cat-list-of-cat-breeds-pictures-of-cats.jpg" />
</div>
<img src="http://annhowardesign.com/images/arrowright.jpg" class="next" alt="Next"/>
<img src="http://annhowardesign.com/images/arrowleft.jpg" class="prev" alt="Previous"/>
</div>CSS..。
#img-grp-wrap {
position: relative;
width: 180px;
height: 180px;
margin: 100px auto;
}
.img-wrap {
position: relative;
border: 1px solid #CCC;
width: 180px;
height: 180px;
}
.img-wrap img {
position: absolute;
top: 0;
left: 0;
-moz-box-shadow: 1px 1px 4px #CCC;
padding: 10px;
}
.next, .prev {
position: absolute;
cursor: pointer;
top: 70px;
}
.next {
right: -40px;
}
.prev {
left: -40px;
}Jquery..。
$('.img-wrap img:gt(0)').hide();
$('.next').click(function() {
$('.img-wrap img:first-child').fadeOut().next().fadeIn().end().appendTo('.img-wrap');
});
$('.prev').click(function() {
$('.img-wrap img:first-child').fadeOut();
$('.img-wrap img:last-child').prependTo('.img-wrap').fadeOut();
$('.img-wrap img:first-child').fadeIn();
});最后，工作的小提琴是..。http://jsfiddle.net/b4T7m/
如果你需要和setInterval..。http://jsfiddle.net/bh6aY/
享受你的编码…！
Stack Overflow用户
发布于 2014-06-09 23:04:40
试试这个功能。
function reverseLoop() {
$('.Slider > div:last')
.addClass('animation')
.prev()
.removeClass('animation')
.show()
.end()
.appendTo('.Slider');
}
setInterval(reverseLoop, 8000);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24134781
复制相关文章
点击加载更多
腾讯云开发者
