JS初學——添加索引匹配數組練習

1、頁面布局

　　

<div id="wrap">
            <img src=""/>
            <span>頁面數量正在加載中...</span>
            <p>圖片說明正在加載中..</p>
            <ul></ul>
        </div>

2、添加樣式

<style type="text/css">
            li{list-style: none;}
            ul{margin: 0;padding: 0;}
            p{margin: 0;}
            body { background:#333; }
            #wrap{
                margin: 0 auto;
                position: relative;
                height: 500px;
                width: 400px;
                border: 1px solid #f8f812;
                background: url('img/loader_ico.gif') no-repeat center;
            }
            #wrap img{
                height: 500px;
                width: 400px;
                text-align: center;
                position: absolute;
            }
            #wrap span,#wrap p{
                height: 30px;
                width: 400px;
                position: absolute;
                left: 0;
                line-height: 30px;
                text-align: center;
                background: #fff;
            }
            span{top:0;}
            p{bottom: 0;}
            ul{position: absolute;top: 0;right: -30px;}
            li{
                height: 20px;
                width: 20px;
                background: #666;
                margin-top: 2px;
            }
            .active{background-color: yellow;}
        </style>

　　

3、寫JS代碼

<script type="text/javascript">
            var arrImg = ["img/1.png","img/2.png","img/3.png","img/4.png"]
            var arrName = ["第一張","第二張","第三張","第四張"]
            var num = 0;
            var oldli = null;
            var oDiv = document.getElementById("wrap");
            var oimg = oDiv.getElementsByTagName("img")[0];
            var oSpan = oDiv.getElementsByTagName("span")[0];
            var oP = oDiv.getElementsByTagName("p")[0];
            var oUl = oDiv.getElementsByTagName("ul")[0];
            var aLi = oDiv.getElementsByTagName("li");
            
            
            for(var i =0;i<arrImg.length;i++){
                oUl.innerHTML += "<li></li>";
            }
            oldli = aLi[num];
            //初始化
            oimg.src = 'img/1.png';
            oP.innerHTML = arrName[num];
            oSpan.innerHTML = num+1 + "/" + arrImg.length;
            aLi[num].className = "active";
            
            for(var i=0;i<arrImg.length;i++){
                aLi[i].index = i;
                aLi[i].onclick = function(){
                    oimg.src = arrImg[this.index];
                    oP.innerHTML = arrName[this.index];
                    oSpan.innerHTML = 1+this.index + "/" + arrImg.length;
                    oldli.className = "";
                    oldli = this;
                    this.className = "active";
                }
            }
        </script>

　　寫JS代碼中，首先獲取所有元素，通過Id獲取div，然后通過div.getElmentsByTagName();獲取div下的元素，注意后面要加上每個元素對應的數值【0】；定義數組，並設置num = 0;添加與數組相對應數量的li標簽，對整個div進行初始化，即第一個頁面，然后通過for循環給所有li標簽添加點擊事件，在添加點擊事件之前需給li標簽添加索引，對應數組的每個值；最后一步是給li標簽設置屬性，當前選項背景為黃色，首先定義一個空元素，然后在添加li標簽時同時將現有的li標簽賦值給空元素，在初始化的過程中給原有的Li標簽增加點擊之后的屬性，通過增加類名的方式實現；在li標簽的點擊事件中引入清除之前li標簽點擊時產生的屬性，並給當前被點擊的Li標簽　設置點擊之后的屬性。

4、實現效果

　　

　　需注意的問題：1、在添加li標簽的過程中：+=才能實現插入多個li標簽。

for(var i =0;i<arrImg.length;i++){
                oUl.innerHTML += "<li></li>";
            }

　　2、實現點擊下一個Li標簽之前清空之前li標簽的background屬性也可以通過for循環清除然后再添加。

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

　　　　通過這種方式清除屬性的話不需要再另外設置oldli = null;