0

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

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);

});
4

3 回答 3

2

我不确定是否真的需要创建自己的函数。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);
});
于 2013-04-01T19:20:19.640 回答
1

是的，给它一个class而不是一个id

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

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

于 2013-04-01T18:53:03.240 回答
0

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

$.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/

于 2013-04-01T19:00:32.753 回答