[英]Jquery gallery next/previous buttons
我在半年前創建了一個jquery畫廊(SO社區幫助了我很多,因為我對js / jquery不夠熟悉),現在我想向該畫廊添加下一個/上一個按鈕。 我嘗試將其與其他畫廊結合使用,但沒有正常工作。
這是js:
<script type="text/javascript">
function showPic (whichpic) {
if (document.getElementById) {
$('#actimg').fadeOut(170);
setTimeout(function() {
document.getElementById('actimg').src = whichpic.href;
$('#actimg').fadeIn(170);
}, 170);
return false;
} else {
return true;
}
}
</script>
和html:
<img id="actimg" src="" width="600" height="400" alt="main" />
<a onclick="return showPic(this)" href="example_1.jpg">
<img height="39px" width="58px" src="example_1.jpg" alt="thumbnail" />
</a>
<a onclick="return showPic(this)" href="example_2.jpg">
<img height="39px" width="58px" src="example_2.jpg" alt="thumbnail" />
</a>
<a onclick="return showPic(this)" href="example_3.jpg">
<img height="39px" width="58px" src="example_3.jpg" alt="thumbnail" />
</a>
畫廊看起來像http://www.rafsimons.com/collections/aw-11/,但是它沒有閃爍,並且現在沒有我要制作的下一步/上一步按鈕。 在此先感謝您的幫助。
首先將一個class屬性添加到您的所有拇指( <a>
標簽),以便可以從jQuery輕松引用它們:
<a class="gallery_item" onclick="return showPic(this)" href="example_1.jpg">
<img height="39px" width="58px" src="example_1.jpg" alt="thumbnail" />
</a>
...
我們需要一種方法來知道哪個是當前圖像。 我們可以將該信息存儲在您的<a>
標記本身的自定義屬性中。 為此,請修改showPic函數,例如:
function showPic (whichpic) {
if (document.getElementById) {
$('.gallery_item').removeAttr('current'); // <- remove 'current' attribute from all thumbs
$('#actimg').fadeOut(170);
setTimeout(function() {
document.getElementById('actimg').src = whichpic.href;
$('#actimg').fadeIn(170);
$(whichpic).attr('current', '1'); // <- set this one as current
}, 170);
return false;
} else {
return true;
}
}
現在為下一個/上一個按鈕添加2個鏈接,並將它們放置在適當的位置。 將其ID分別設為“下一個”和“上一個”
<a href="#" id="prev" onclick="return nextPic()">Prev</a>
<a href="#" id="next" onclick="return prevPic()">Next</a>
現在添加2個js函數nextPic()和prevPic(),例如:
function nextPic() {
var current = null;
$('.gallery_item').each(function() {
if($(this).attr('current')=='1') {
current = $(this);
return false;
}
});
if(current!=null) {
if(current.parent().next().length!=0) {
showPic(current.parent().next().find('.gallery_item')[0]); // <- show next pic
}
else {
showPic($('.gallery_item:first')[0]); // if no next pic, show first pic
}
}
return false;
}
function prevPic() {
var current = null;
$('.gallery_item').each(function() {
if($(this).attr('current')=='1') {
current = $(this);
return false;
}
});
if(current!=null) {
if(current.parent().prev().length!=0) {
showPic(current.parent().prev().find('.gallery_item')[0]); // <- show next pic
}
else {
showPic($('.gallery_item:last')[0]); // if no next pic, show first pic
}
}
return false;
}
還要添加它,以默認將第一張圖像初始化為當前圖像。
$().ready(function() {
$('.gallery_item:first').attr('current', '1');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.