js基础——图片切换实例(函数传参) 

<!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、把每组里不同的值找出来，通过传参实现

posted @ 2015-11-27 16:42  波克比520  阅读(460)  评论(0)  编辑  收藏  举报