JS application function parameter passing instance, multiple sets of picture switch Examples

<div class="box" id="pic1">

        <img src="" />

        <Span> number is loading ...... </ span>

        <P> text is loading ...... </ p>

        <ul></ul>

    </div>

 

    <div class="box" id="pic2">

        <img src="" />

        <Span> number is loading ...... </ span>

        <P> text is loading ...... </ p>

        <ul></ul>

</div>

Copy the code

css style:

 

Copy the code

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

Copy the code

js code:

 

Copy the code

<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, if necessary) {

        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 n = 0;

 

        // added in the ul li, the number is equal to the length of the array li

        for(var i=0;i<arrImg.length;i++){

            oUl.innerHTML += "<li></li>";

        }

 

        //initialization

            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; // index, li is equal to the current i

            aLi[i][evt]=function(){

                num = this.index;

                fn();

            }

 

        }

 

    }

 

</script>