Question

我正在尝试创建一个具有缩略图导航的自定义Jquery Slider。我成功创建了滑块。但不是缩略图导航。这是我的代码

    $(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");。您正在使用选择器img更改每个循环中缩略图中的每个'.thumbnail_ul li a 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>');
});

如何使用jquery为滑块创建缩略图

1 个答案: