我有一個圖像滑塊，但我需要在同一頁上的多個滑塊。是否有可能複製我的功能，所以它不會干擾原來的？創建多個圖像滑塊

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

相關問題