巧用數(shù)組制作圖片切換js代碼

更新時(shí)間：2016年11月29日 16:22:59 作者：Wendy-lxq

這篇文章主要為大家詳細(xì)介紹了巧用數(shù)組制作圖片切換js實(shí)現(xiàn)代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在前面的文章中，我們講到了js中數(shù)組的具體操作，詳見(jiàn)（Js對(duì)Array的各種操作總結(jié)），這里就不再做詳細(xì)的講解。今天主要的目的是如何用數(shù)組進(jìn)行圖片的簡(jiǎn)單左右切換。

本文中的圖片切換具體步驟如下：

      第1步：簡(jiǎn)單的布局并設(shè)計(jì)基本的顯示樣式；
       第2步：通過(guò)js獲取相關(guān)元素；
       第3步：通過(guò)數(shù)組進(jìn)行圖片url和對(duì)應(yīng)文字描述的存儲(chǔ)；
       第4步：初始化：包括圖片的初始化，顯示圖片數(shù)字以及對(duì)應(yīng)文字的初始化等；
       第5步：點(diǎn)擊按鈕切換圖片，編寫(xiě)對(duì)應(yīng)的函數(shù)，其實(shí)就是數(shù)組的簡(jiǎn)單應(yīng)用。
       接下來(lái)先看看效果圖，然后進(jìn)行對(duì)應(yīng)的代碼講解。

實(shí)現(xiàn)代碼：

<!DOCTYPE html> 

<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">數(shù)量正在統(tǒng)計(jì)中……</span> 
 <img id="img1" src="../images/1.jpg" alt=""> 
 </div> 
</body> 
</html>

這個(gè)例子很簡(jiǎn)單，主要就是對(duì)數(shù)組的簡(jiǎn)單讀寫(xiě)以及對(duì)html的屬性?xún)?nèi)容讀寫(xiě)操作。其中需要注意的是，當(dāng)我們點(diǎn)擊下一張到最后一張圖片或者點(diǎn)擊上一張到第一張時(shí)，需要設(shè)置具體的數(shù)值變化，不=否則會(huì)越界，那么圖片、數(shù)字和對(duì)應(yīng)的問(wèn)題就沒(méi)有內(nèi)容。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: