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

                padding:;

            }

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

            }

            .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:;

            }

            .leftPrev,.leftPrev2{

                left: 10px;

                background-position: -7px top;

            }

            .rightNext,.rightNext2{

                right: 10px;

                background-position: left -62px;

            }

            .num,.num2{

                display: inline-block;

                position: absolute;

                bottom:;

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

        }