jQuery的幻灯片的缩略图

我需要做幻灯片，与后续代码：jQuery的幻灯片的缩略图

<div id="galerry-one" class="gallery"> 
    <div class="content"> 
     <ul> 
      <li id="content-1"><img src="image1.jpg" /></li> 
      <li id="content-2"><img src="image2.jpg" /></li> 
      <li id="content-3"><iframe src="http://www.youtube.com/..."></iframe></li> 
      <li id="content-4"><img src="image3.jpg" /></li> 
      <li id="content-5"><iframe src="http://www.youtube.com/..."></iframe></li> 
     </ul> 
    </div> 
    <div class="thumbnails"> 
     <span class="prev"> « </span> 
     <ul> 
      <li id="go-content-1"><img src="image1_thumbnai.jpg" /></li> 
      <li id="go-content-2"><img src="image2_thumbnai.jpg" /></li> 
      <li id="go-content-3"><img src="youtube1_thumbnai.jpg" /></li> 
      <li id="go-content-4"><img src="image3_thumbnai.jpg" /></li> 
      <li id="go-content-5"><img src="youtube2_thumbnai.jpg" /></li> 
     </ul> 
     <span class="next"> » </span> 
    </div> 
</div>

好吧，当我点击a与go-content-1 ID，所有其他幻灯片隐藏和显示1等。

我已经开始：

$(document).ready(function() { 
    $('.gallery').each(function(index, element) { 
     var id = $(this).attr('id'); 
     var images = $('#' + id + ' .content li').index() -1; 

     $('#' + id + ' .prev').click(function(e) { 
      e.preventDefault(); 

      if($('#' + id + ' .content .current').prev().length == 0) { 
       $('#' + id + ' .content .current').removeClass('current').hide(); 
       $('#' + id + ' .content li:last').addClass('current').show(); 
      } else { 
       $('#' + id + ' .content .current').removeClass('current').fadeOut(1000).hide().prev().fadeIn(1000).addClass('current').show(); 
      } 

      return false; 
     }); 

     $('#' + id + ' .next').click(function(e) { 
      e.preventDefault(); 

      if($('#' + id + ' .content .current').next().length == 0) { 
       $('#' + id + ' .content .current').removeClass('current').hide(); 
       $('#' + id + ' .content li:first').addClass('current').show(); 
      } else { 
       $('#' + id + ' .content .current').removeClass('current').fadeOut(1000).hide().next().fadeIn(1000).addClass('current').show(); 
      } 

      return false; 
     }); 

     $('#' + id + ' .thumbnails li').click(function(e) { 
      e.preventDefault(); 

      $('#' + id + ' .content .current').removeClass('current').hide(); 
      $('#' + id + ' .content .thumbnails').removeClass('current'); 
      $('#' + id + ' .content li').eq($(this).index()).fadeIn(1000).addClass('current').show(); 

      return false; 
     }); 

     $('#' + id + ' .content li:first').addClass('current').show(); 
    }); 
});

现在的问题是每次都显示只有4缩略图。谢谢！

来源

2012-02-12 Gabriel Santos

重要的是知道索引，在任何时候。看看我刚才写的关于如何创建滑块的教程，它可能有助于http://www.onextrapixel.com/2011/07/01/how-to-create-a-slideshow-plugin-with -jquery/ – elclanrs 2012-02-12 20:12:36

不要在ID中硬编码数字。使用next和prev。

另外我建议阅读关于delegate，它会提高客户端的性能，并使代码更清洁。提示：使用委托而不是你写的内容的第二行。

快乐学习！ :)

来源

2012-02-12 20:55:56

已实施，但我无法执行缩略图显示/隐藏，每次只显示4个。 – 2012-02-13 00:14:44

看到我更新的问题，我到目前为止做了什么。 – 2012-02-13 00:17:22

jQuery的幻灯片的缩略图

回答

相关问题