思路:
延续上一节说的利用自定义属性来作为桥梁，建立匹配关系，然后改变页面中元素的显示效果；
首先需要写好一个合理的HTML结构 // 何为合理呢？就是说考虑这个结构哪些需要提前写好的，哪些又是可以通过程序来动态实现的
然后写好相应的CSS样式文件，让基本的构造出来；
最后通过JS来控制相关页面元素的显示效果；
实例：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>自定义属性之图片切换实例</title> <style> div, p, ul { margin: 0; padding: 0;} li { list-style: none;} body {background: #333; } #pic { width: 400px; height: 500px; position: relative; margin:0 auto; background: url(img/loader_ico.gif) no-repeat center #fff;} #pic img { width: 400px; height: 500px;} #pic ul { width: 40px; position: absolute; top: 0; right: -50px;} #pic li { width: 40px; height:40px; margin-bottom: 4px; background: #666 } #pic .active { background: #fc3;} #pic span { top: 0;} #pic p { bottom: 0;} #pic p, #pic span {position: absolute; width: 400px; height: 30px; color: #fff; text-align: center; line-height: 30px; background: #000; } </style> <script> window.onload = function (){ var oDiv = document.getElementById('pic'); 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 = oUl.getElementsByTagName('li'); var arrUrl = ['img/1.png','img/2.png', 'img/3.png','img/4.png']; var arrText = ['图片1','图片2','图片3','图片4']; var num = 0; var oldLi = null; for (var i=0; i<arrUrl.length; i++) { oUl.innerHTML += '<li></li>'; }; oldLi = aLi[num]; // 初始化 oImg.src = arrUrl[num]; oSpan.innerHTML = 1+num+'/'+arrUrl.length; oP.innerHTML = arrText[num]; aLi[num].className = 'active'; }; </script> </head> <body> <div id="pic"> <img src=""> <span>数量正在加载中</span> <p>正在加载中。。。</p> <ul></ul> </div> </body> </html>