之前的博客有一個圖片切換的例子，實現了簡單輪播圖的點擊切換的案例，今天就說一下多組輪播切換，前提是布局差不多，通過函數傳參的形式減少代碼應用，但是同時還能實現效果。先來看一下之前那個例子的實現圖片：

那麽今天我來實現兩組這樣的圖片切換，通過傳參數來實現，這樣分可以減少js代碼：

<div class="box" id="pic1">
        <img src="" />
        <span>數量正在加載中……</span>
        <p>文字說明正在加載中……</p>
        <ul></
 
ul>
    </div>

    <div class="box" id="pic2">
        <img src="" />
        <span>數量正在加載中……</span>
        <p>文字說明正在加載中……</p>
        <ul></ul>
</div>

css樣式：

<style>
    ul { padding:0; margin:0; }
    li { list-style:none; }
    .box 
 
{ width:400px; height:500px; position:relative;
        float: left;margin-right:60px; background:url(img/loader_ico.gif) no-repeat center #fff; }
    .box img { width:400px; height:500px; }
    .box ul { width:40px; position:absolute; top:0; right:-50px; }
    .box li { width:40px; height:40px; margin-bottom:4px; background
 
:#666; }
    .box .active { background:#FC3; }
    .box span { top:0; }
    .box p { bottom:0; margin:0; }
    .box p,.box span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }
</style>

js代碼：

<script>
    window.onload = function(){
        fnTab("pic1",["img/pic1.jpg","img/pic2.jpg","img/pic3.jpg","img/pic4.jpg"],["圖1","圖2","圖3","圖4"],"onclick");
        fnTab("pic2",["img/pic4.jpg","img/pic2.jpg","img/pic1.jpg","img/pic4.jpg"],["圖4","圖2","圖3","圖1"],"onmouseover")
    };

    function fnTab(id,arrImg,arrPtxt,evt){
        var oDiv=document.getElementById(id);
        var oImg=oDiv.getElementsByTagName("img")[0];
        var oUl=oDiv.getElementsByTagName("ul")[0];
        var aLi=oUl.getElementsByTagName("li");
        var oSpan=oDiv.getElementsByTagName("span")[0];
        var oPtxt=oDiv.getElementsByTagName("p")[0];
        var num=0;

        //在ul裏追加li，li的數量等於數組的長度
        for(var i=0;i<arrImg.length;i++){
            oUl.innerHTML += "<li></li>";
        }

        //初始化
            function fn(){
                 oImg.src=arrImg[num];
                 oPtxt.innerHTML=arrPtxt[num];
                 oSpan.innerHTML=1+num+"/"+arrImg.length;
                for(var i=0;i<aLi.length;i++){
                    aLi[i].className="";
                }
                aLi[num].className="active"
            }
            fn();

        for(var i=0;i<aLi.length;i++){//循環li
            aLi[i].index=i;//索引值，當前li等於i
            aLi[i][evt]=function(){
                num = this.index;
                fn();
            }

        }

    }

</script>

來看效果土：

通過傳參其實就是減少代碼的重用，那麽重用代碼的幾個前提是：

1、盡量保證 HTML 代碼結構一致，可以通過父級選取子元素

2、把核心主程序實現，用函數包起來

3、把每組裏不同的值找出來，通過傳參實現

好了，今天就到這裏，明天繼續！加油！

JS函數傳參實例應用：多組圖片切換實例