javascript 如何使用 jQuery 自定义动画 <ul> Carousel Slider？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20734050/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How To Custom Animate <ul> Carousel Slider with jQuery?
提问by Jake
I am working to build a small jQuery-based carousel without a plugin and I just can't seem to make the animations work. This isn't supposed to auto-rotate, but instead only rotate when the user clicks 'next' or 'prev' buttons. The only method I can get to work is automatically removing the last element to replace it just before the first element... this happens within a split-second and while it is continuous, there is no animation at all.
我正在努力构建一个没有插件的基于 jQuery 的小轮播，但我似乎无法使动画正常工作。这不应该自动旋转，而是仅在用户单击“下一个”或“上一个”按钮时旋转。我可以开始工作的唯一方法是自动删除最后一个元素以在第一个元素之前替换它......这发生在一瞬间，虽然它是连续的，但根本没有动画。
Here's my HTML container:
这是我的 HTML 容器：
<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>
The #carousel-wrapbehaves as the viewport fixed at 400px(each list item is also 400px). The #testimonial-listis dynamically resized in jQuery based on the total number of items... so 4 items at 400px ~= 1600px along with some margins/padding. This keeps all the testimonials next to each other so they should animate into view from the right/left side.
在＃传送带缠绕表现为固定在400像素视口（每个列表项也是400像素）。在＃证明书列表是动态jQuery中在400像素〜= 1600像素与一些边距/填充沿着调整基于项的总数...所以4个项目。这使所有推荐书彼此相邻，因此它们应该从右侧/左侧动画进入视图。
Here is my very basic jQuery which honestly isn't performing as well as I'd hoped:
这是我非常基本的 jQuery，老实说，它的表现不如我希望的：
$('#prv-testimonial').on('click', function(){
var lastitm = $('#testimonial-list li:last').remove();
$('#testimonial-list li:first').before(lastitm);
});
There are only 2 things I need to figure out:
我只需要弄清楚两件事：
When a user clicks next/prev buttons how do I trigger the animation from right-to-left or vice-versa?
Once the animation finishes, how do I ensure that the carousel will loop infinitely? How can I get the "prev" button to move from the 1st item all the way to the last item and still hold continuity?
当用户单击下一个/上一个按钮时，我如何从右到左触发动画，反之亦然？
动画完成后，如何确保轮播将无限循环？如何让“上一个”按钮从第一个项目一直移动到最后一个项目并保持连续性？
Any advice would be more than appreciated!
任何建议将不胜感激！
回答by John S
Here's a try:
这是一个尝试：
$('#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);
});
});
I'm using the jquery .animate()function to animate the "margin-left" css style. The Next button animates and then moves the first element to the end of the list. The Previous button moves the last item to the front of the list and then animates.
我正在使用 jquery.animate()函数为“margin-left”css 样式设置动画。Next 按钮动画，然后将第一个元素移动到列表的末尾。上一个按钮将最后一项移动到列表的前面，然后进行动画处理。
BTW: The value "4000" is the duration of the animation in milliseconds.
顺便说一句：值“4000”是以毫秒为单位的动画持续时间。
