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

Posted 麦兜家园

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS函数传参实例应用:多组图片切换实例相关的知识,希望对你有一定的参考价值。

之前的博客有一个图片切换的例子,实现了简单轮播图的点击切换的案例,今天就说一下多组轮播切换,前提是布局差不多,通过函数传参的形式减少代码应用,但是同时还能实现效果。先来看一下之前那个例子的实现图片:

那么今天我来实现两组这样的图片切换,通过传参数来实现,这样分可以减少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函数传参实例应用:多组图片切换实例的主要内容,如果未能解决你的问题,请参考以下文章

js - 02课 - 图片循环顺序切换实例

函数间传参实例(前一个函数产生的数据传到给后一个函数应用)

JS之闭包的应用

setInterval多组定时器函数封装传参

片段事务中的实例化错误

理解js继承的6种方式