1

我正在使用 jquery 在 div 集内滑动图像以隐藏溢出，然后删除第一个图像并将其附加到末尾，这样我在列表中总是有相同数量的图像，并且它们每次都向左滑动函数触发：

function xxx(){
    var first = $('.ximg:first');
    $('.ximg').animate({ left: '-=200'}, 2000, function(){ $('.ximg').css({left: '0'}); first.insertAfter($('.ximg:last'));});

}
setInterval(function(){ xxx () }, 8000);

<div style="position:relative; overflow:hidden; width: 400px; height: 150px;">
    <div class="ximg" style="position: relative; width: 200px; min-height:150px; background:red"></div>
    <div class="ximg" style="position: relative; width: 200px; min-height:150px; background:orange"></div>
    <div class="ximg" style="position: relative; width: 200px; min-height:150px; background:green"></div>
    <div class="ximg" style="position: relative; width: 200px; min-height:150px; background:yelow"></div>
</div>

但我最终只在容器中添加了 1 个图像，第二个图像仅在函数触发时添加。我知道有读过的插件可以做这种事情，但我希望它简单，并且更喜欢尝试编写自己的插件，即使我对 jquery 比较陌生！

http://jsfiddle.net/rgct2/6/

容器是 400 宽，因为每个 div 是 200 宽，所以应该总是有 2 个 div 在视图中，即使在动画期间它会显示第一个和第三个 div 的百分比。

4

2 回答 2

1

更好的方法可能是对第一个元素的宽度进行动画处理，因此不需要对所有元素进行动画处理。

function xxx() {
    var origWidth = $('.ximg:first').width();
    $('.ximg:first').animate({
        width: 0
    }, 2000, function() {$(this).insertAfter($('.ximg:last')).css({width: origWidth})});
}

元素也存在 CSS 问题。父元素应该有white-space: nowrap，所以元素在同一行，即使它们不可见。子元素应该有display:inline-block，因此它们可以排成一行（即内联），并且具有可配置的宽度。

要注意的另一件事是<div>s 之间的空格。您需要确保没有无意的空格，包括换行符。

请参阅更新的演示：http: //jsfiddle.net/rgct2/7/。

于 2012-09-27T05:25:59.017 回答
0

经过测试及其工作，而不是使用删除，使用“分离”

function xxx(){

     $('.ximg').css({left: '0'});
     $('.ximg').animate({ left: '-=200'}, 2000, function(){ });
     $('.ximg:first').detach().insertAfter( $('.ximg:last') );
}
于 2012-09-27T05:05:36.140 回答