Javascript 如何自定义动画<;ul>;带jQuery的转盘滑块?
我正在努力构建一个没有插件的基于jQuery的小型旋转木马,但我似乎无法让动画正常工作。这不是自动旋转,而是仅在用户单击“下一步”或“上一步”按钮时旋转。我唯一可以开始工作的方法是自动删除最后一个元素,在第一个元素之前替换它。。。这发生在一瞬间,虽然它是连续的,但根本没有动画 这是我的HTML容器:Javascript 如何自定义动画<;ul>;带jQuery的转盘滑块?,javascript,jquery,slider,jquery-animate,carousel,Javascript,Jquery,Slider,Jquery Animate,Carousel,我正在努力构建一个没有插件的基于jQuery的小型旋转木马,但我似乎无法让动画正常工作。这不是自动旋转,而是仅在用户单击“下一步”或“上一步”按钮时旋转。我唯一可以开始工作的方法是自动删除最后一个元素,在第一个元素之前替换它。。。这发生在一瞬间,虽然它是连续的,但根本没有动画 这是我的HTML容器: <div class="carousel-nav" clearfix"> <img src="img/prev.png" id="prv-testimonial">
<div class="carousel-nav" clearfix">
<img src="img/prev.png" id="prv-testimonial">
<img src="img/next.png" id="nxt-testimonial">
</div>
<div id="carousel-wrap">
<ul id="testimonial-list" class="clearfix">
<li>
<p class="context">Some testimonial goes right here[1]</p>
<span class="creds">Tiffany LastName</span>
</li>
<li>
<p class="context">"We could not be more pleased. A++ efforts!"</p>
<span class="creds">Alan Goodwrench</span>
</li>
<li>
<p class="context">"After just one purchase, we know this is the company to stick with."</p>
<span class="creds">Butters Stotch</span>
</li>
</ul>
</div>
我只需要弄清楚两件事:
$('#prv-testimonial').on('click', function(){
var $last = $('#testimonial-list li:last');
$last.remove().css({ 'margin-left': '-400px' });
$('#testimonial-list li:first').before($last);
$last.animate({ 'margin-left': '0px' }, 4000); });
$('#nxt-testimonial').on('click', function(){
var $first = $('#testimonial-list li:first');
$first.animate({ 'margin-left': '-400px' }, 4000, function() {
$first.remove().css({ 'margin-left': '0px' });
$('#testimonial-list li:last').after($first);
});
});
我正在使用jquery.animate()
函数来设置“左边距”css样式的动画。“下一步”按钮设置动画,然后将第一个元素移动到列表的末尾。“上一步”按钮将最后一项移动到列表的前面,然后设置动画
顺便说一句:值“4000”是动画的持续时间(毫秒)
哦,这是一个极好的解决方案,也谢谢你的提琴。
$('#prv-testimonial').on('click', function(){
var $last = $('#testimonial-list li:last');
$last.remove().css({ 'margin-left': '-400px' });
$('#testimonial-list li:first').before($last);
$last.animate({ 'margin-left': '0px' }, 4000); });
$('#nxt-testimonial').on('click', function(){
var $first = $('#testimonial-list li:first');
$first.animate({ 'margin-left': '-400px' }, 4000, function() {
$first.remove().css({ 'margin-left': '0px' });
$('#testimonial-list li:last').after($first);
});
});