0
我曾問及做了如下代碼:jQuery的幻燈片縮略圖顯示/隱藏
$(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').fadeOut(1000).removeClass('current').hide();
$('#' + id + ' .content li:last').fadeIn(1000).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').fadeOut(1000).removeClass('current').hide();
$('#' + id + ' .content li:first').fadeIn(1000).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 + ' .thumbnails ul').css('width', $('#' + id + ' .thumbnails ul li').length * scrollWidth + 'px');
$('#' + id + ' .content li:first').addClass('current').show();
});
});
的HTML:
<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>
現在的問題是,我怎麼能限制到4個縮略圖每次我點擊上一個/下一個?
你能解釋一下多一點你真正是什麼?你想滾動縮略圖,但一次只能看到4個嗎?那麼最重要的內容呢? – 2012-02-13 01:39:45
我做節目的選擇thhumbnail擴大了工作,如果單擊一個或下一個,工作正常。問題是,如果我有10張圖片,我想顯示前4張並隱藏其他圖片。點擊前面的時候,隱藏在第一和顯示上一次,或者,如果我點擊下一步,顯示5和隱藏第一,你明白嗎? – 2012-02-13 01:42:06