1、首先打开html编辑器，新建一个html文件，里面写入4个li标签，并在上方的style标签中设置li的样式，给li标签高度和宽度以及边框，同时设置li标签之间的间隔。
2、然后在script标签中写入js，首先用getElementsByTagName获取所有li标签的dom元素，任何使用for循环遍历数组中的元素，for循环内部设置每个li标签的index元素，在给每个元素添加点击事件，点击之后就会弹出li标签的index值出来。
3、最后打开浏览器，点击其中的一个标签，就会弹出对应的li标签数值了。
<!DOCTYPE html><head>
<style type="text/css">
ul{
list-style:none /* 去掉ul前面的符号 */
margin: 0px /* 与外界元素的距离为0 */
padding: 0px /* 与内部元素的距离为0 */
width: auto /* 宽度根据元素内容调整 */
}
/* 所有class为menu的div中的ul中的li样式 */
ul li{float:left /* 向左漂移，将竖排变为横排 */}
#ulImages li{display:none}
</style>
<script>
function show(id){
var images = document.getElementById("ulImages").getElementsByTagName("li")
for(var i=0i<images.lengthi++){
images[i].style.display = "none"
}
images[id].style.display = "block"
}
</script>
</head>
<body>
<div id="t_c_ggao">
<ul id="ulImages">
<li style="display:block"><img src="images/list-1.jpg" width="480" height="200"/>1</li>
<li><img src="images/list-1.jpg" width="480" height="200" />2</li>
<li><img src="images/lp570.jpg" width="480" height="200"/>3</li>
<li><img src="images/qx570.jpg" width="480" height="200" />4</li>
<li><img src="images/ys570.jpg" width="480" height="200"/>5</li>
<li><img src="images/zx570.jpg" width="480" height="200" />6</li>
<li><img src="images/list-1.jpg" width="480" height="200" />7</li>
</ul>
<ul id="list_number">
<li><a href="#" onclick="show(0)">1</a></li>
<li><a href="#" onclick="show(1)">2</a></li>
<li><a href="#" onclick="show(2)">3</a></li>
<li><a href="#" onclick="show(3)">4</a></li>
<li><a href="#" onclick="show(4)">5</a></li>
<li><a href="#" onclick="show(5)">6</a></li>
<li><a href="#" onclick="show(6)">7</a></li>
</ul>
</div>
</body>
嗯?貌似我回答晚了，仅供参考吧，欢迎交流学习qQgroup21/77/712
