Question

我想知道是否有人有一些简单的东西从一堆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然后是next。

由于斯科特

更新：

好的，我决定根据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();
    }
  });
});