我正在尝试创建一个具有缩略图导航的自定义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%;}
现在我在缩略图中得到的是阵列的最后一个图像重复到幻灯片的总数。请帮忙
答案 0 :(得分:2)
我相信您的问题在于此代码:$('.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>');
});