JavaScript實現圖片切換效果

2019-11-19 15:49:42

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了JavaScript實現圖片切換效果，自定義屬性的應用供大家參考，具體內容如下

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>圖片切換實例</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;/*整個div放到頁面中間的位置*/        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標簽的地方就得有數組[0],否則不提示錯誤，但卻會加載不出來需要的內容。        var oP = document.getElementsByTagName("p")[0];        var oNum = document.getElementsByTagName("span")[0];         var oUl = document.getElementsByTagName("ul")[0];        var aLi = oUl.getElementsByTagName("li");//通過父標簽找到的子標簽，這里不能加數組[0]        var arrUrl = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.png"];        var arrText = ["中原工學院圖書館","中工宿舍樓","玫瑰花","小貓咪","綠色盆栽"];        for(var i=0;i<arrUrl.length;i++){          oUl.innerHTML += "<li></li>";//添加用“+=”，該寫用“=”        }        //初始化        //有數組的地方，大部分都有一個數字在靜靜的等待.數組配合數字以便找到需要的內容。        var num = 0;        oImg.src = arrUrl[num];        oP.innerHTML = arrText[num];        oNum.innerHTML = 1+num+'/'+arrUrl.length;        //在ul中添加li,根據數組的長度，為ul添加li的數量        aLi[num].className = "active";//為標簽添加class屬性，需要用到className        for(i=0;i<aLi.length;i++){          aLi[i].index = i;//索引值,需要添加對應關系，就要想到添加索引值                  //定義的有數組，就不能忘記加[0]          aLi[i].onclick = function(){            //點擊按鈕，找到與之對應的圖片            oImg.src = arrUrl[this.index];            oP.innerHTML = arrText[this.index];            oNum.innerHTML = 1+this.index+'/'+arrUrl.length;            //添加對應的點擊時，li的圖標發生變化，兩種思路            //思路1：清空當前所有active樣式，為當前添加此class屬性（擴展性好，但是運行速度可能不好）            for(var i=0; i<aLi.length; i++){              aLi[i].className = "";            }            this.className = "active";            //思路2：清空前一個點擊li的樣式，為當前添加class屬性（定點清除）          }        }    }        </script>  </head>  <body>    <div id="pic" >      <img src=""/>      <span>數量正在加載中......</span>      <p>文字說明正在加載中......</p>      <ul>      </ul>    </div>  </body></html>

JavaScript代碼片段可以簡化成如下：

<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 = ["中原工學院圖書館","中工宿舍樓","玫瑰花","小貓咪","綠色盆栽"];        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>

效果圖：