JS函数传参实例应用，多组图片切换实例

Posted 2021-03-14 珍惜缘份

<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>