<div class="index-banner" id="banner"></div>

 1       .index-banner  { 2             position: relative; 3             width:1280px; 4             height: 461px; 5             margin:0 auto; 6             overflow: hidden; 7         } 8         .index-banner .banner-list{ 9             position: absolute;10             width:3840px;11             height: 461px;12             z-index: 1;13         }14         .index-banner .banner-list a{15             display: block;16             float: left;17             width:1280px;18             height:461px;19         }20         .banner1{21             background: url("../Pictures/tooopen_sy_158723161481.jpg") no-repeat;22         }23         .banner2{24             background: url("../Pictures/m2015030300220997.jpg") no-repeat;25         }26         .banner3{27             background: url("../Pictures/2008080611515815.jpg") no-repeat;28         }29         .banner4{30             background: url("../Pictures/53310080201004241856521800459127582_005.jpg") no-repeat;31         }32         .banner5{33             background: url("../Pictures/2008080611515815.jpg") no-repeat;34         }35         .index-banner .slide{36             position: absolute;37             z-index: 2;38             left:50%;39             margin-left:-5px;40             bottom: 20px;41         }42         .index-banner .slide span{43             display: inline-block;44             cursor: pointer;45             margin-right: 10px;46             width: 10px;47             height: 10px;48             border-radius: 50%;49             background-color: #fff;50         }51         .index-banner .slide .active{52             background-color: #000;53         }54         .arrow {55             cursor: pointer;56             position: absolute;57             z-index: 2;58             top: 180px;59             display: none;60             line-height: 70px;61             text-align: center;62             vertical-align: middle;63             font-size: 35px;64             font-weight: bold;65             width: 50px;66             height: 70px;67             background-color: RGBA(0,0,0,.3);68             color: #fff;69         }70         .arrow:hover { background-color: RGBA(0,0,0,.7);}71         .index-banner:hover .arrow { display: block;}72         #prev { left: 20px;}73         #next { right: 20px;}

 1    $(function () { 2         var banner= $(‘#banner‘); 3         var index = 1;//当前的索引号  初始化为1 4         var interval = 5000; 5         var timer; 6         var number=5; //图片的数量 7         var imageWidth=1280; 8         banner.append("<div class=‘banner-list‘ id=‘banner_list‘ style=‘left: -1280px;‘></div>") 9         banner.append(" <div class=‘slide‘ id=‘slideBtn‘>");10         banner.append(" <a href=‘javascript:;‘ id=‘prev‘ class=‘arrow‘>&lt;</a><a href=‘javascript:;‘ id=‘next‘ class=‘arrow‘>&gt;</a>")11 12         $(‘#banner_list‘).css(‘width‘,imageWidth*number);13         for(i=1;i<=number;i++){14             $(‘#banner_list‘).append(" <a  class=‘banner"+i+"‘ ></a>");15             $("#slideBtn").append(" <span index=‘"+i+"‘ ></span>")16         }17         $("#slideBtn span").eq(0).addClass(‘active‘);18         //图片切换函数19         function animate (offset) {20             var left = parseInt($(‘#banner_list‘).css(‘left‘)) + offset;21             if (offset>0) {22                 offset = ‘+=‘ + offset;23             }24             else {25                 offset = ‘-=‘ + Math.abs(offset);26             }27             $(‘#banner_list‘).animate({‘left‘: offset}, 500, function () {28                 console.log(left)29                 if(left > 0){30                     $(‘#banner_list‘).css(‘left‘,-imageWidth*4);31                 }32                 if(left < -imageWidth*4) {33                     $(‘#banner_list‘).css(‘left‘,0);34                 }35             });36         }37        //下边的小点控制38         function showButton() {39             $(‘#slideBtn span‘).eq(index-1).addClass(‘active‘).siblings().removeClass(‘active‘);40         }41         //定时器，每Interval执行一次图片切换42         function play() {43             timer = setTimeout(function () {44                 $(‘#next‘).trigger(‘click‘);45                 play();46             }, interval);47         }48         function stop() {49             clearTimeout(timer);50         }51 52         $(‘#next‘).bind(‘click‘, function () {53             if ($(‘#banner_list‘).is(‘:animated‘)) {54                 return;55             }56             if (index == 5) {57                 index = 1;58             }59             else {60                 index += 1;61             }62             animate(-imageWidth);63             showButton();64         });65 66         $(‘#prev‘).bind(‘click‘, function () {67             if ($(‘#banner_list‘).is(‘:animated‘)) {68                 return;69             }70             if (index == 1) {71                 index = 5;72             }73             else {74                 index -= 1;75             }76             animate(imageWidth);77             showButton();78         });79 80         $(‘#slideBtn span‘).each(function () {81             $(this).bind(‘click‘, function () {82                 if ($(‘#banner_list‘).is(‘:animated‘) || $(this).attr(‘class‘)==‘active‘) {83                     return;84                 }85                 var myIndex = parseInt($(this).attr(‘index‘));86                 var offset = -imageWidth * (myIndex - index);87 88                 animate(offset);89                 index = myIndex;90                 showButton();91             })92         });93 94         banner.hover(stop, play);95 96         play();97 98     });