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

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

*{
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;
}

$(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()
}