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>

私は一度に1つのDIVを好きです。 divをクリックすると次のスライドに進みます。そして最後に、最初のものに戻ります。

効果がない、次の1つの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

を参照してください。 com /、スライダーが実装されています。 – kobe

ここに例があります。http://vandelaydesign.com/blog/web-development/jquery-image-galleries/ – kobe

allposters.comで例を見ましたか？ああ、やったよ。 – kobe