我试图使用jquery创建一个简单的轮播。
的HTML
<div class="block-13">
<div class="list-wrapper">
<ul class="list row">
<li class="col-xs-12">
<table>
<tr class="row">
<td class="col-xs-8">
<div class="item item-1">
<div class="text">test1</div>
</div>
</td>
<td class="col-xs-4">
<div class="item-name">
<div class="text">test11</div>
</div>
</td>
</tr>
</table>
</li>
<li class="col-xs-12">
<table>
<tr class="row">
<td class="col-xs-8">
<div class="item item-1">
<div class="text">test2</div>
</div>
</td>
<td class="col-xs-4">
<div class="item-name">
<div class="text">test22</div>
</div>
</td>
</tr>
</table>
</li>
<li class="col-xs-12">
<table>
<tr class="row">
<td class="col-xs-8">
<div class="item item-1">
<div class="text">test3</div>
</div>
</td>
<td class="col-xs-4">
<div class="item-name">
<div class="text">test33</div>
</div>
</td>
</tr>
</table>
</li>
</ul>
</div>
<div class="show-more next">next</div>
<div class="show-more prev">prev</div>
jQuery的
var width = $('.block-13 .list li').width();
function carouselNext() {
$('.block-13 .list').filter(':not(:animated)').animate({
right: '+=' + width
}, 500, function () {
var first = $('.block-13 .list li:first-child');
first.remove();
$(this).append(first);
$(this).css({
right: '-=' + width
});
});
}
function carouselPrev() {
$('.block-13 .list').filter(':not(:animated)').animate({
right: '-=' + width
}, 500, function () {
var last = $('.block-13 .list li:last-child');
last.remove();
$(this).prepend(last);
$(this).css({
right: '+=' + width
});
});
}
$('.block-13 .show-more.prev').click(function () {
carouselPrev();
});
$('.block-13 .show-more.next').click(function () {
carouselNext();
});
http://jsfiddle.net/93PhD/12/
function carouselNext()
正常工作,块移动平稳。但是我无法获得function carouselPrev()
的流畅动画。如何使其正确工作?
最佳答案
查看小提琴http://jsfiddle.net/YFgAM/。在开始动画之前添加元素。
$('.block-13 .show-more.prev').click(function () {
var last = $('.block-13 .list li:last-child');
last.remove();
$('.block-13 .list').filter(':not(:animated)').prepend(last);
$('.block-13 .list').filter(':not(:animated)').css({
right: '+=' + width
});
$('.block-13 .list').filter(':not(:animated)').animate({
right: '-=' + width
});
});
关于jquery - jQuery简单轮播动画上一个元素的移动,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23912832/