我有一个图像滑块，但我需要在同一页上的多个滑块。是否有可能复制我的功能，所以它不会干扰原来的？创建多个图像滑块

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

});

来源

2013-04-01 Chaddly

我不知道，如果创建自己的功能是这个真的有必要。 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-01 19:20:19

是的，这种方法似乎最好。改变时机很容易，还是需要创建单独的功能？ – Chaddly

我认为达到这个目的的一个合适方法是为标签添加一个'data-interval'属性。这里：http://jsfiddle.net/F4nTJ/3/ –

数据区间肯定有帮助。虽然我的容器需要不同的尺寸。我试图创建单独的函数和单独的CSS类，但它似乎没有正常工作。第一个容器退出运行，另外3个容器显示不正确。 – Chaddly

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

在HTML变化id="slideshow"到class="slideshow"和CSS和jQuery变化#slideshow到.slideshow

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

来源

2013-04-01 18:53:03 Horen

伟大的提示，它现在更有意义。我这样做了，容器弄乱了......很难解释。这里是一个显示问题的jsfiddle：http://jsfiddle.net/xEYVc/我需要创建单独的函数吗？ – Chaddly

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

$.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-01 19:00:32 dfsq

'img'标签应该适当关闭'/>'（HTML标记） –

@roXon这个文档类型不需要。 – dfsq

创建多个图像滑块

回答

CSS

HTML

的JavaScript

相关问题