Question

我想使用jquery创建一个连续滚动图像滑块。这是我能得到的。我不太明白如何传递函数参数，尤其是当我使用this时。我们的想法是启动动画并将图像从div外部移动到视图外的另一侧，然后重置其位置。下面的图像将在它前面的图像通过起点后立即开始动画，依此类推。（我发现速度是250px / sec所以当前元素的宽度除以250应该给我时间，我应该等待启动下一个动画，我想......）

<div class="slideshow" style="position: absolute; top: 220px;left: 50%; margin-left: -700px;height: 600px; width: 1400px; z-index: 2;">
     <img src="img2.jpg" id="img2" class="slideshowImages">
     <img src="img3.jpg" id="img3" class="slideshowImages">
     <img src="img4.jpg" id="img4" class="slideshowImages"> 
     <img src="img1.jpg" id="img1" class="slideshowImages">
</div>

    </body>
    <script>
        $(document).ready(setTimeout(function() {
            var InfiniteRotator =
            {
                init: function(ident, time)
                {
                    $(ident).animate({"margin-left": "-=2500"},{ duration:10000,easing: 'linear',queue:false, complete:function(){
                    $(ident).css("margin-left", "1400px"); 
                    } 
                      // Animation complete.
                    }).delay(time);
                }

            }
            var time = 0;
            $('div.slideshow').each(function(){

                InfiniteRotator.init(this, time);
                time = $(this).width()/250;
            });
        }, 3000));

    </script>

Answer 1

$('div.slideshow')指的是一个元素（包含图片的div），因此在其上调用each将不会像您的代码所假设的那样遍历您的图像。

$('div.slideshow img').each(function(){
    InfiniteRotator.init(this, time);
    time = $(this).width()/250;
});

在这个改进的版本中，this指的是当前的图像元素（jQuery提供的一个很好的快捷方式）。这段代码做了同样的事情：

$('div.slideshow img').each(function(index, element){
    InfiniteRotator.init(element, time);
    time = $(this).width()/250;
});

如果您想“像jQuery”并允许InfiniteRotator使用this访问当前图片，您可以使用call或apply而不是直接调用{{1}方法并将元素作为上下文传递（init在被调用函数中引用的内容）：

this

使用jquery循环遍历div中的子项和动画

1 个答案: