如何使用jQuery创建滑块缩略图

Question

我想创建一个具有缩略图导航的自定义JQuery滑块。我成功创建了滑块。但不是缩略图导航。 这里是我的代码

$(document).ready(function(){ 
     var i = 0; 
var m_height = $('main').height(); 
$('.test_bg').css('height', (function(){ 
     return m_height + 20; 
    })); 

    var doc_wid = $(document).width(); 
    if (doc_wid <= 768) { 
     $('.test_bg').css('height','auto'); 
    } 
$('.test_bg').append('<div class="thumbnails"></div>'); 
$('.thumbnails').append('<ul class="thumbnail_ul container"></ul>') 
     var slide_array = $('.slide').toArray(); 
     var total_slide = $(slide_array).length; 
     var img_path = "images/main-bg"; 

     var current_slide = slide_array[i]; 
     for(i=0; i<=total_slide; i++) { 

      $('.thumbnail_ul').append('<li><a href="#"><img alt="slider"></a></li>'); 
      $('.thumbnail_ul li a img').attr('src', img_path + i + ".jpg"); 
     } 


$('.slide').first().show(); 
    } 

而我的HTML标记

<div class="test_bg"> 
     <img class="slide active" src="images/main-bg1.jpg"> 
     <img class="slide" src="images/main-bg2.jpg"> 
     <img class="slide" src="images/main-bg3.jpg"> 
     <img class="slide" src="images/main-bg4.jpg"> 
     <img class="slide" src="images/main-bg5.jpg"> 
     <img class="slide" src="images/main-bg6.jpg"> 
     <img class="slide" src="images/main-bg7.jpg"> 
    </div> 

和CSS

.test_bg { position:absolute; width:100%; height:100%; top:70px; left:0; z-index:-99;} 
    .test_bg img { width:100%; height:100%;} 
    .slide {display:none;} 
    .thumbnails { position:absolute; bottom:0; width:100%; height:100px; float:left;} 
    .thumbnail_ul { /*float:left; width:100%;*/ height:100px; padding:0; overflow-x:auto; overflow-y:hidden;} 
    .thumbnail_ul li { float:left; list-style:none; height:100px; width:140px; padding:10px; border:3px solid #ffffff; cursor:pointer;} 
    .thumbnail_ul li a { text-decoration:none; float:left; width:100%;} 
    .thumbnail_ul li a img { float:left; width:100%;} 

现在我在缩略图得到的是数组的最后一个图像重复的总幻灯片的数量。请帮助

Answer 1

我相信你的问题是这个代码：$('.thumbnail_ul li a img').attr('src', img_path + i + ".jpg");。您正在使用选择器'.thumbnail_ul li a img'更改每个循环中缩略图中的每个img。

只要做到：

$('.thumbnail_ul').append('<li><a href="#"><img alt="slider" src="'+img_path + i +'.jpg"></a></li>'); 

可以使用each功能，进一步提高你的代码。

$('.test_bg').append('<div class="thumbnails"><ul class="thumbnail_ul container"></ul></div>'); 

var img_path = "images/main-bg"; 

$('.slide').each(function(i){ 
    $('.thumbnail_ul').append('<li><a href="#"><img alt="slider" src="'+img_path + i +'.jpg"></a></li>'); 
}); 

编辑：

如果你只是想用你的缩略图相同的图像src值，只需检索它，所以你不必担心指数。

$('.slide').each(function(){ 
    var src = $(this).attr('src'); 
    $('.thumbnail_ul').append('<li><a href="#"><img alt="slider" src="'+src+'"></a></li>'); 
});