javascript - 创建多个图像 slider

Question

我有一个图像 slider ，但我需要在同一页面上使用多个 slider 。是否可以复制我的函数以使其不干扰原始函数？

HTML

<div id="slideshow">
   <div>
     <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
   </div>
   <div>
     <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
   </div>
</div>

CSS

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
}
#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

JQuery

$(function() {

            $("#slideshow > div:gt(0)").hide();

            setInterval(function() { 
              $('#slideshow > div:first')
                .fadeOut(1000)
                .next()
                .fadeIn(1000)
                .end()
                .appendTo('#slideshow');
            },  3000);

});

Answer 1

我不确定为此是否真的需要创建您自己的函数。 Horen 给出了一个很好的答案，但是在实现它时，您意识到需要稍微调整代码以处理区分将 child 附加到自己的幻灯片或另一个幻灯片的代码。为此，我使用了 .each() 函数来“沙盒”每个幻灯片。

当您使用两张以上的图片时，也会出现错误。我处理这个问题的方法是在加载时隐藏除第二张图片以外的所有图片，而不是只隐藏第一张图片。

这是我使用的最终标记:

演示:http://jsfiddle.net/F4nTJ/2/

CSS

.slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
}
.slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

html

<div class="slideshow">
   <div>
       <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg"/>
   </div>
   <div>
       <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg"/>
   </div>
</div>
<div class="slideshow">
   <div>
       <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg"/>
   </div>
   <div>
       <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg"/>
   </div>
</div>

JavaScript

$(function() {
    $(".slideshow").each(function(){$(this).children().not(":nth-child(2)").hide();});

    setInterval(function() {
        $('.slideshow').each(function(){
            $(this).children(':first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo($(this));
        });
    },  3000);
});