标签：
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;
标签：
原文地址：http://www.cnblogs.com/running-wsnail/p/5634347.html
