JS-【同页面多次调用】轮播特效封装-json传多个参数

看着传那么一长串的参数神烦，继续深化！——json传参：

html：

<div class="scrollBanner">
            <ul class="bannerBox">
                <li><a href="javascript:;"><img src="1.jpg" /></a></li>
                <li><a href="javascript:;"><img src="2.jpg" /></a></li>
                <li><a href="javascript:;"><img src="3.jpg" /></a></li>
                <li><a href="javascript:;"><img src="4.jpg" /></a></li>
                <li><a href="javascript:;"><img src="5.jpg" /></a></li>
                <li><a href="javascript:;"><img src="6.jpg" /></a></li>
            </ul>
            
            <a class="btn leftPrev" title="上一张"></a>
            <a class="btn rightNext" title="下一张"></a>
            <div class="num">
                <span class="current"></span>
                <span class=""></span>
                <span class=""></span>
                <span class=""></span>
                <span class=""></span>
                <span class=""></span>
            </div>
        </div>
        <div class="scrollBanner2">
            <ul class="bannerBox2">
                <li><a href="javascript:;"><img src="1.jpg" /></a></li>
                <li><a href="javascript:;"><img src="2.jpg" /></a></li>
                <li><a href="javascript:;"><img src="3.jpg" /></a></li>
                <li><a href="javascript:;"><img src="4.jpg" /></a></li>
                <li><a href="javascript:;"><img src="5.jpg" /></a></li>
                <li><a href="javascript:;"><img src="6.jpg" /></a></li>
            </ul>
            
            <a class="btn leftPrev2" title="上一张"></a>
            <a class="btn rightNext2" title="下一张"></a>
            <div class="num2">
                <span class="current"></span>
                <span class=""></span>
                <span class=""></span>
                <span class=""></span>
                <span class=""></span>
                <span class=""></span>
            </div>
        </div>

css

*{
                margin: 0;
                padding: 0;
            }
            li{
                list-style: none;
            }
            .scrollBanner,.scrollBanner2{
                position: relative;
                overflow: hidden;
                width: 400px;
                height: 320px;
                margin: 0 auto;
            }
            .bannerBox,.bannerBox2{
                position: absolute;
                width: 2400px;
                height: 320px;
            }
            .bannerBox li,.bannerBox2 li{
                float: left;
            }
            .bannerBox li a,.bannerBox2 li a{
                font-size: 60px;
                font-weight: 900;
            }
            .bannerBox li a img,.bannerBox2 li a img{
                width: 400px;
                height: 320px;
                display: block;
            }
            .btn{
                display: inline-block;
                position: absolute;
                top: 50%;
                    width: 54px;
                height: 56px;
                margin-top: -28px;
                background: url('btn.gif') no-repeat;
                opacity: 0.5;
            }
            .btn:hover{
                cursor: pointer;
                opacity: 1;
            }
            .leftPrev,.leftPrev2{
                left: 10px;
                background-position: -7px top;
            }
            .rightNext,.rightNext2{
                right: 10px;
                background-position: left -62px;
            }
            .num,.num2{
                display: inline-block;
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 36px;
                margin-top: -28px;
                text-align: right;
                background-color: rgba(123,123,123,0.8);
            }
            .num span,.num2 span{
                display: inline-block;
                width: 12px;
                background-color: #F18A00;
                height: 12px;
                margin-right: 6px;
                border-radius: 50%;
                -webkit-border-radius: 50%;
                box-sizing: border-box;
            }
            .num span:hover,.current,.num2 span:hover{
                cursor: pointer;
                border: 2px solid #ffd;
            }

js

$(function(){
            var duration;
            var playTime;
//            banner(".scrollBanner li",".bannerBox",".num",".leftPrev",".rightNext")
            banner({
                a : ".scrollBanner li",
                b : ".bannerBox",
                c : ".num",
                d : ".leftPrev",
                e : ".rightNext"
            });
            banner({
                a : ".scrollBanner2 li",
                b : ".bannerBox2",
                c : ".num2",
                d : ".leftPrev2",
                e : ".rightNext2"
            });
        });
        
        banner = function(one){
            
            var $newLi = $(one.a).eq(0).clone();
            $(one.b).append($newLi);
            var $oUL = $(one.b);
            var $oLIs = $oUL.children();
            var $oNavlist = $(one.c).children();
            var $prev = $(one.d);
            var $Next = $(one.e);
            var index = 0;
            var imgLenth = $oLIs.length - 1;
            function xtd(){
                    $Next.on("click",function(){
                    index++;
                    if(index > imgLenth){
                        index = 1;
                        $oUL.css({"left":0+"px"})
                    }
                    move(index);
                })
                $prev.on("click",function(){
                    index--;
                    if(index < 0){
                        index = 2;
                        $oUl.css({"left":-(imgLength)*$oLIs.eq(0).width()+"px"})
                    }
                    move(index);
                })
                
                function move(index){
                    $oUL.stop().animate({
                        "left":index*(-$oLIs.eq(0).width())+"px"
                    },100);
                    $oNavlist.removeClass("current");
                    $oNavlist.eq(index >= imgLenth?0:index).addClass("current");
                }
            }
            xtd()
        }