巧用陣列製作圖片切換js程式碼
- 高洛峰原創
- 2016-12-03 14:49:271130瀏覽
在前面的文章中，我們講到了js中數組的具體操作，詳見（Js對Array的各種操作總結），這裡就不再做詳細的講解。今天主要的目的是如何用數組進行圖片的簡單左右切換。
本文中的圖片切換特定步驟如下：
步驟1：簡單的佈局並設計基本的顯示樣式； 對應文字描述的儲存；
步驟4：初始化：包含圖片的初始化，顯示圖片數字以及對應文字的初始化等；
步驟5：點選按鈕切換圖片，寫出對應的函數，其實就是陣列的簡單應用。
實作程式碼：
<!DOCTYPE html> <br>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片切换</title>
<style>
.box{
width: 600px;
height:400px;
border: 10px solid #ccc;
position: relative;
margin: 40px auto 0;
}
.box a{
width: 30px;
height: 30px;
background-color: #000;
border: 5px solid #fff;
position: absolute;
top:180px;
text-align: center;
font-size:25px;
font-weight: bold;
line-height: 30px;
color:#fff;
text-decoration: none;
filter: alpha(opacity:40);
opacity: 0.4;
}
.box a:hover{
filter:alpha(opacity:80);
opacity:0.8;
}
.box #prev{
left: 10px;
}
.box #next{
right: 10px;
}
#text,#num{
height: 30px;
line-height:30px;
width: 600px;
color:#fff;
position: absolute;
left: 0;
background-color: #000;
text-align: center;
filter: alpha(opacity:80);
opacity: 0.8;
margin:0;
}
.box #text{
bottom: 0;
}
.box #num{
top:0;
}
.box #img1{
width: 600px;
height: 400px;
}
</style>
<script>
window.onload = function () {
var oPrev = document.getElementById("prev");
var oNext = document.getElementById("next");
var oText = document.getElementById("text");
var oNum = document.getElementById("num");
var oImg = document.getElementById("img1");
var arrUrl = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg'];
var arrText = ['文字1','文字2','文字3','文字4'];
//初始化
var num = 0;
function fnTab(){
oNum.innerHTML = num + 1 + '/' + arrText.length;
oImg.src = arrUrl[num];
oText.innerHTML = arrText[num];
};
fnTab();
oPrev.onclick = function(){
num --;
if( num == -1){
num = arrUrl.length -1;
}
fnTab();
};
oNext.onclick = function(){
num ++;
if(num == arrUrl.length){
num = 0;
}
fnTab();
};
};
</script>
</head>
<body>
<div class="box">
<a id="prev" href="javascript:;"> < </a>
<a id="next" href="javascript:;"> > </a>
<p id="text">图片正在加载中……</p>
<span id="num">数量正在统计中……</span>
<img id="img1" src="../images/1.jpg" alt="">
</div>
</body>
</html>這個範例很簡單，主要就是對陣列的簡單讀寫以及對html的屬性內容讀寫操作。其中要注意的是，當我們點擊下一張到最後一張圖片或點擊上一張到第一張時，需要設定具體的數值變化，不=否則會越界，那麼圖片、數字和對應的問題就沒有內容。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn