闲来无事，自己搞了一个图片轮播的jQuery插件，话不多说，直接上代码咯！！！！！
1、HTML模块的代码很简单。写一个容器就可以了，之后往里面加入图片轮播的效果
<div class="index-banner" id="banner"></div>
2、样式代码
1 .index-banner { 2 position: relative; 3 1280px; 4 height: 461px; 5 margin:0 auto; 6 overflow: hidden; 7 } 8 .index-banner .banner-list{ 9 position: absolute; 10 3840px; 11 height: 461px; 12 z-index: 1; 13 } 14 .index-banner .banner-list a{ 15 display: block; 16 float: left; 17 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 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 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;}
3、js控制代码
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'><</a><a href='javascript:;' id='next' class='arrow'>></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 });