JavaScript實(shí)現(xiàn)圖片切換效果

來源：懂視網(wǎng) 責(zé)編：小OO 時(shí)間：2020-11-27 22:32:52

JavaScript實(shí)現(xiàn)圖片切換效果

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)圖片切換效果，自定義屬性的應(yīng)用供大家參考，具體內(nèi)容如下：<，否則不提示錯(cuò)誤，但卻會(huì)加載不出來需要的內(nèi)容。var oP = document.getElementsByTagName("p")[0]；var oNum = document.getElementsByTagName("span")[0]；var oUl = document.getElementsByTagName("ul")[0]；var aLi = oUl.getElementsByTagName("li")；//通過父標(biāo)簽找到的子標(biāo)簽，這里不能加數(shù)組[0] var arrUrl = ["img/1.jpg"，"img/2.jpg"，"img/3.jpg"。

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)圖片切換效果，自定義屬性的應(yīng)用供大家參考，具體內(nèi)容如下：<，否則不提示錯(cuò)誤，但卻會(huì)加載不出來需要的內(nèi)容。var oP = document.getElementsByTagName("p")[0]；var oNum = document.getElementsByTagName("span")[0]；var oUl = document.getElementsByTagName("ul")[0]；var aLi = oUl.getElementsByTagName("li")；//通過父標(biāo)簽找到的子標(biāo)簽，這里不能加數(shù)組[0] var arrUrl = ["img/1.jpg"，"img/2.jpg"，"img/3.jpg"。

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)圖片切換效果，自定義屬性的應(yīng)用供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>圖片切換實(shí)例</title>
 <style>
 body{
 background-color: #A9A9A9;
 margin:0px;
 }
 ul{
 padding: 0;
 margin: 0;
 }
 li{ 
 list-style: none;
 }
 #pic{
 width:670px;
 height: 420px;
 position:relative;
 margin: 0 auto;/*整個(gè)div放到頁(yè)面中間的位置*/
 background:url(img/loading.png) no-repeat center;
 background-color:#fff;

 }
 #pic img{
 width:670px;
 height: 420px;
 }
 #pic ul{
 position: absolute;
 top: 0px;
 right: -50px;
 }
 #pic li{
 width:40px;
 height:40px;
 margin-bottom: 4px;
 background:#666;
 }
 #pic .active{
 background: cadetblue;
 }
 #pic span{
 top:0px;


 }
 #pic p{
 bottom:0px;
 margin:0;

 }
 #pic p,#pic span{
 width: 670px;
 height: 30px;
 line-height: 30px;
 text-align: center;
 position:absolute;
 left:0px;
 color:#fff;
 background-color:#333;

 }
 </style>
 <script>


 window.onload = function(){
 var oDiv = document.getElementById("pic");
 var oImg = document.getElementsByTagName("img")[0];//有tag標(biāo)簽的地方就得有數(shù)組[0],否則不提示錯(cuò)誤，但卻會(huì)加載不出來需要的內(nèi)容。
 var oP = document.getElementsByTagName("p")[0];
 var oNum = document.getElementsByTagName("span")[0]; 
 var oUl = document.getElementsByTagName("ul")[0];
 var aLi = oUl.getElementsByTagName("li");//通過父標(biāo)簽找到的子標(biāo)簽，這里不能加數(shù)組[0]

 var arrUrl = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.png"];
 var arrText = ["中原工學(xué)院圖書館","中工宿舍樓","玫瑰花","小貓咪","綠色盆栽"];

 for(var i=0;i<arrUrl.length;i++){
 oUl.innerHTML += "<li></li>";//添加用“+=”，該寫用“=”
 }
 //初始化
 //有數(shù)組的地方，大部分都有一個(gè)數(shù)字在靜靜的等待.數(shù)組配合數(shù)字以便找到需要的內(nèi)容。
 var num = 0;
 oImg.src = arrUrl[num];
 oP.innerHTML = arrText[num];
 oNum.innerHTML = 1+num+'/'+arrUrl.length;
 //在ul中添加li,根據(jù)數(shù)組的長(zhǎng)度，為ul添加li的數(shù)量
 aLi[num].className = "active";//為標(biāo)簽添加class屬性，需要用到className

 for(i=0;i<aLi.length;i++){
 aLi[i].index = i;//索引值,需要添加對(duì)應(yīng)關(guān)系，就要想到添加索引值
 //定義的有數(shù)組，就不能忘記加[0]
 aLi[i].onclick = function(){
 //點(diǎn)擊按鈕，找到與之對(duì)應(yīng)的圖片
 oImg.src = arrUrl[this.index];
 oP.innerHTML = arrText[this.index];
 oNum.innerHTML = 1+this.index+'/'+arrUrl.length;
 //添加對(duì)應(yīng)的點(diǎn)擊時(shí)，li的圖標(biāo)發(fā)生變化，兩種思路
 //思路1：清空當(dāng)前所有active樣式，為當(dāng)前添加此class屬性（擴(kuò)展性好，但是運(yùn)行速度可能不好）
 for(var i=0; i<aLi.length; i++){
 aLi[i].className = "";
 }
 this.className = "active";
 //思路2：清空前一個(gè)點(diǎn)擊li的樣式，為當(dāng)前添加class屬性（定點(diǎn)清除）
 }

 }


 } 
 </script>
 </head>
 <body>
 <div id="pic" >

 <img src=""/>
 <span>數(shù)量正在加載中......</span>
 <p>文字說明正在加載中......</p>
 <ul>

 </ul>
 </div>
 </body>
</html>

JavaScript代碼片段可以簡(jiǎn)化成如下：

<script>


 window.onload = function(){
 var oDiv = document.getElementById("pic");
 var oImg = document.getElementsByTagName("img")[0];
 var oP = document.getElementsByTagName("p")[0];
 var oNum = document.getElementsByTagName("span")[0]; 
 var oUl = document.getElementsByTagName("ul")[0];
 var aLi = oUl.getElementsByTagName("li");
 var arrUrl = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.png"];
 var arrText = ["中原工學(xué)院圖書館","中工宿舍樓","玫瑰花","小貓咪","綠色盆栽"];
 for(var i=0;i<arrUrl.length;i++){
 oUl.innerHTML += "<li></li>";
 }
 //初始化
 var num = 0;
 function fnTab(){
 oImg.src = arrUrl[num];
 oP.innerHTML = arrText[num];
 oNum.innerHTML = 1+num+'/'+arrUrl.length;
 aLi[num].className = "";
 }
 fnTab();

 for(i=0;i<aLi.length;i++){
 aLi[i].index = i;
 aLi[i].onclick = function(){
 num = this.index;
 fnTab();
 }
 aLi[num].className = "active";
 }

 }


 } 
</script>

效果圖：