<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>js基础——图片切换实例(函数传参)</title> <style> ul { padding:0; margin:0; } li { list-style:none; } body { background:#fff; } .box{ width: 400px; height: 500px;/* margin:0 auto; */ float: left; margin-right: 60px; background:#fff url(img/loader_ico.gif) center no-repeat; position: relative;} .box img{ width: 400px; height: 500px;} .box ul{ width: 40px; position: absolute; top: 0; right: -50px;} .box li{ width: 40px; height: 40px; margin-bottom: 5px; background: #ccc;} .box .active{ background: #f90;} .box span ,.box p{ width: 400px; height: 30px; line-height: 30px; text-align: center; color: #fff; background: #000; position: absolute; left: 0;} .box span{ top: 0;} .box p{ bottom: 0; margin:0;} </style> <script> window.onload = function(){ fnTab('pic1' ,['img/1.png','img/2.png','img/3.png','img/4.png'],['图片一','图片二','图片三','图片四'] ,'onclick'); fnTab('pic2' ,['img/2.png','img/3.png','img/4.png'],['图片二','图片三','图片四'] ,'onmouseover'); }; function fnTab(id ,arrUrl ,arrText ,evt){ var oDiv = document.getElementById(id); 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 = ['图片一','图片二','图片三','图片四']; var num = 0; //遍历生成所有li for(var i =0; i<arrUrl.length; i++){ oUl.innerHTML += '<li></li>'; } //初始化函数 function init(){ oImg.src = arrUrl[num]; oSpan.innerHTML = 1+num + '/' + arrUrl.length; oP.innerHTML = arrText[num]; for(var i=0; i<aLi.length; i++){ aLi[i].className = ''; } aLi[num].className = 'active'; }; init(); //点击按钮切换图片 for( var i=0; i<aLi.length; i++ ){ // 为每个li添加索引值 aLi[i].index = i; aLi[i][evt] = function (){ // 将当前点击的索引值赋给num num = this.index; // 然后执行切换函数 init(); }; } }; </script> </head> <body> <div id="pic1" class="box"> <img src="" /> <span>数量正在加载中……</span> <p>文字说明正在加载中……</p> <ul></ul> </div> <div id="pic2" class="box"> <img src="" /> <span>数量正在加载中……</span> <p>文字说明正在加载中……</p> <ul> <!-- <li class="active"></li> <li></li> <li></li> <li></li> --> </ul> </div> </body> </html>
重用代码：
1、尽量保证 HTML 代码结构一致，可以通过父级选取子元素
2、把核心主程序实现，用函数包起来
3、把每组里不同的值找出来，通过传参实现