我正在为这个特定的项目构建一个jQuery Slider。我遇到的问题是我的代码在幻灯片过程中没有动画。它应该做的是,根据切换侧(左侧或右侧),它应该+ 100%右-100%。它完全按照我想要的方式制作动画,但它并没有“出”它应该如何。这是它的实时版本。 dev.designsbycamaron.net
Jquery Code。
$('section#tf-ipad-info .listofimages .slide:first').addClass('activeslide').appendTo('#tf-ipad-info .mid ul li.mid-image');
$('section#tf-ipad-info .left-click').click(function(){
$('.activeslide').removeClass('activeslide').animate({right : "+=100%"}, { complete: function(){
$('section#tf-ipad-info .listofimages .slide:first').addClass('activeslide').appendTo('#tf-ipad-info .mid ul li.mid-image').css({right : "-100%"});
$('section#tf-ipad-info .activeslide').animate({right : "0"} , {complete: function(){
}
})
}
});
$('section#tf-ipad-info .mid-image .slide:first').appendTo('section#tf-ipad-info .listofimages').removeClass('activeslide').removeAttr('style');
});
$('section#tf-ipad-info .right-click').click(function(){
$('.activeslide').animate({right : "-=100%"}, { complete: function(){
$('section#tf-ipad-info .listofimages .slide:first').addClass('activeslide').appendTo('#tf-ipad-info .mid ul li.mid-image').css({right : "+100%"});
$('section#tf-ipad-info .activeslide').animate({right : "0"} , {complete: function(){
}
})
}
});
$('section#tf-ipad-info .mid-image .slide:first').appendTo('section#tf-ipad-info .listofimages').removeClass('activeslide').removeAttr('style');
});
HTML CODE
<ul class="tbl rotater-img-main-content t-align-center">
<li class="tbl-cell left-click">
<img src="images/left-arrow-clicker.png" alt="arrow"/>
</li>
<li class="tbl-cell mid-image ">
</li>
<li class="tbl-cell right-click">
<img src="images/right-arrow-clicker.png" alt="arrow"/>
</li>
</ul>