[英]Javascript function for photo gallery
我正在構建一個靜態頁面,其中有一個圖像和2個箭頭(一個在圖像左側,一個在右側)。 通過單擊箭頭,將出現另一個圖像,例如在照片庫中。 總共只有4張圖片,我會將該圖片保存在計算機的站點文件夾中。 基本上,箭頭應允許用戶通過按右箭頭或左箭頭在圖像之間循環。
我有一系列圖像:
var imageArray = new Array();
imageArray[0] = new Image(); imageArray[0].src = 'image1.png';
imageArray[1] = new Image(); imageArray[1].src = 'image2.png';
imageArray[2] = new Image(); imgArray[2].src = 'image3.png';
imageArray[3] = new Image(); imageArray[3].src = 'image4.png';
和兩個箭頭:
<div id="apDiv1"style="display:none"><img src="arrow left.png" width="125" height="74" onClick="SOMETHING">/div>
<div id="apDiv2"style="display:none"><img src="arrow right.png" width="125" height="74" onClick="SOMETHING">/div
我想讓onClick調用一個顯示下一個(或上一個)圖像的函數。
我怎樣才能做到這一點? 我雖然具有某種切換功能,但效果不佳。
另外,我可以設置一個起始圖像嗎?
<div id="apDiv3"style="display:none"><img src="image1.png" width="200" height="200">/div>
前進(前進點擊)
CSS:
.show {
display: block;
}
.hide {
display: none;
}
現在,假設您有一個包含所有圖像div的父div,如下所示
<div class='parent'>
<div id='image-1' class='show'><img src="image1.png" width="200" height="200"></div>
<div id='image-2' class='hide'><img src="image2.png" width="200" height="200"></div>
<div id='image-3' class='hide'><img src="image3.png" width="200" height="200"></div>
//and so on...
</div>
JavaScript代碼:
onclick: function() {
var images = $('.parent').find('div');
for(var i = 0; i< images.length; i++) {
if($(images[i]).hasClass('show')) {
$(images[i]).removeClass('show');
$(images[i]).addClass('hide');
if(i === images.length -1) {
$(images[0]).removeClass('hide');
$(images[0]).addClass('show');
} else {
$(images[0]).removeClass('show');
$(images[0]).addClass('hide');
}
}
}
}
同樣,實現后退箭頭單擊
希望這可以幫助
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.