创建多个图像滑块

Question

我有一个图像滑块，但我需要在同一页面上有多个滑块。是否可以复制我的功能，使其不会干扰原始功能？

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给出了一个很好的答案，但在实现它时，您意识到代码需要稍微调整以处理区分将子项附加到其自己的幻灯片或另一个上的代码。为此，我使用.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);
});

Answer 2

是的，请给它class而不是id

在HTML中将id="slideshow"更改为class="slideshow"，并在CSS和jQuery中将#slideshow更改为.slideshow

然后，您可以向HTML添加第二个（以及更多）幻灯片容器。只需更改嵌套的图像源，您就可以使用不同的幻灯片 - 很有趣！

Answer 3

这是你应该考虑编写自己的插件的情况：

$.fn.slider = function() {
    return this.each(function() {
        var $self = $(this); 
        $(this).children("div:gt(0)").hide();
        setInterval(function() {
            $self.children('div:first')
                .fadeOut(1000)
                .next()
                .fadeIn(1000)
                .end()
                .appendTo($self);
        }, 3000);
    });
};

$('.slideshow').slider();

http://jsfiddle.net/pnp8m/2/