看着传那么一长串的参数神烦,继续深化!——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() }