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

更新時(shí)間：2021年04月29日 15:02:15 作者：Candice_L

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)圖片切換效果，以及自定義屬性的應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(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ì)加載不出來(lái)需要的內(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");//通過(guò)父標(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>文字說(shuō)明正在加載中......</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>

效果圖：