jquery - 從一堆DIV中製作一個簡單的畫廊

我想知道是否有人有一些簡單的東西從一堆div創建一個畫廊。如jquery - 從一堆DIV中製作一個簡單的畫廊

<div id=gallery> 
    <div class='slide' id=1><img src='image1.png'> this is image 1</div> 
    <div class='slide' id=2><img src='image1.png'> this is image 1</div> 
    <div class='slide' id=3><img src='image1.png'> this is image 1</div> 
    <div class='slide' id=4><img src='image1.png'> this is image 1</div> 
</div>

我喜歡一次顯示一個DIV。點擊div前進到下一張幻燈片。最後，它回到第一個。

沒有效果，只是簡單顯示了一個div後面跟着。

感謝斯科特

UPDATE：

好吧，我決定只寫我自己的基於http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/。任何人都可以使此代碼更加緊湊和高效，請添加評論。

$(document).ready(function(){ 
    var currentPosition = 1; 
    var slides = $('.slide'); 
    var numberOfSlides = slides.length; 

    if(currentPosition==1){ $('.slide').hide(); $('#1').show()}; 

    // Create event listeners for .controls clicks 
    $('.slide') 
    .bind('click', function(){ 
    currentPosition = parseInt($(this).attr('id')); 
    if(currentPosition == numberOfSlides) { 
     $('.slide').hide(); 
     $('#1').show(); 
    } else { 
     $('.slide').hide(); 
     nextPosition = parseInt(currentPosition+1); 

     $('#'+nextPosition).show(); 
    } 
    }); 
});

來源

2010-11-25 Scott Yu - Front-End UX

看，如果這是你想要的HTTP：//www.allposters。 com /，有滑塊實施我們最近做了 – kobe 2010-11-25 19:49:51

有這裏的例子http://vandelaydesign.com/blog/web-development/jquery-image-galleries/ – kobe 2010-11-25 19:50:36

你有沒有在allposters.com看到例子，我可以解釋y你是如何完成的。 – kobe 2010-11-25 20:00:36