如何附加
- 的末尾在屏幕外（溢出）空间？
我有一个脚本可以将无序列表的图像转换为水平滚动轮播，但它的行为不正常！这里...
setInterval(function(){
$('#scroller ul li:first').animate({
marginLeft : '-165px'
}, 2000, 'linear', function() {
// OnComplete
$(this).css('margin-left', '0').appendTo('#scroller ul');
});
}, 2000);
基本上它将第一个
问题是它没有正确重置边距，因此它最终覆盖了之前的最后一个列表元素。在下一轮动画中，它会跳到右侧，但当然会立即与下一个动画 + 移动的
请问有什么建议吗？
（受到 Snook.ca 的 最简单的 jQuery 幻灯片 的启发）
I have a script that turns an unordered list of images into a horizontal scrolling carousel, but it's misbehaving! Here...
setInterval(function(){
$('#scroller ul li:first').animate({
marginLeft : '-165px'
}, 2000, 'linear', function() {
// OnComplete
$(this).css('margin-left', '0').appendTo('#scroller ul');
});
}, 2000);
Basically it slides the first <li> off to the left, then moves it to the end of the <ul>.
The problem is that it doesn't reset the margin properly so it ends up overlaying the previously last list element. On the next round of the animation it jumps to the right but is of course immediately overlayed with the next animated + moved <li>.
The <ul> has it's width set to allow space for one image 'off-screen' but the append seems to miss this space and just puts it at the end of the visibly rendered space!
Any suggestions please?
( Inspired by Snook.ca's Simplest jQuery Slideshow )
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果您在设置 css 值之前添加
.stop()，它将起作用：我做了一个 jsFiddle。
It will work if you add a
.stop()before setting the css value:I've made a jsFiddle.