转载：http://www.qdfuns.com/notes/23446/d1691a1edf5685396813cc85ae6ab10f.html
一直在重复的写banner,写了了好几个，然后每次写，不停的造轮子，然后渐渐的学会封装，虽然还是不太懂更深层次的东西，但在不断的进步中。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>图片轮播</title> 7 <meta name="description" content=""> 8 <meta name="keywords" content=""> 9 <link href="" rel="stylesheet"> 10 <style type="text/css"> 11 html,body{ 12 padding: 0; 13 margin: 0; 14 } 15 ul,ul li{ 16 list-style: none; 17 margin: 0; 18 padding: 0; 19 } 20 .box{ 21 } 22 23 #banner{ 24 position: relative; 25 height:auto; 26 overflow: hidden; 27 } 28 #banner ul{ 29 position:absolute; 30 } 31 #banner ul li{ 32 float: left; 33 } 34 #banner ul li img{ 35 width: 100%; 36 height: 100%; 37 } 38 #banner #prevBtn,#banner #nextBtn{ 39 height:80px; 40 width:30px; 41 background:rgba(0,0,0,0.5); 42 position:absolute; 43 top:50%; 44 margin-top:-40px; 45 font-size:30px; 46 line-height:80px; 47 text-align:center; 48 text-decoration:none; 49 color:white; 50 opacity: 0; 51 transition: opacity 0.8s ease; 52 } 53 #banner #prevBtn{ 54 left:0; 55 } 56 #banner #nextBtn{ 57 right:0; 58 } 59 #banner:hover #prevBtn,#banner:hover #nextBtn{ 60 opacity: 1; 61 } 62 .dot{ 63 height:10px; 64 width:10px; 65 border-radius:10px; 66 background:#2196f3; 67 display:inline-block; 68 margin:5px; 69 } 70 .on{ 71 background: #009688; 72 } 73 </style> 74 </head> 75 <body> 76 <div class="box"> 77 <div id="banner"> 78 <ul id="banner-wrap"> 79 <li> 80 <img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img1.jpg"> 81 </li> 82 <li> 83 <img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img2.jpg"> 84 </li> 85 <li> 86 <img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img3.jpg"> 87 </li> 88 <li> 89 <img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img4.jpg"> 90 </li> 91 <li> 92 <img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img5.jpg"> 93 </li> 94 </ul> 95 </div> 96 </div> 97 <script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.js'></script> 98 <script type="text/javascript"> 99 (function($,window,document,undefinen){ 100 $.fn.bannerSwiper=function(option){ 101 this.default={ 102 boxWrap:null,//必填 103 nextBtn:false,//是否往下启动按钮 104 prevBtn:false,//是否往上启动按钮 105 autoPlay:false,//是否启动自动播放 106 times:3000,//自动轮播的时间间隔, 107 speed:600,//点击按钮是切换的速度 108 circle:false,//是否启动小圆点 109 circleAlign:"center",//小圆点的对其方式 110 circleClick:false//小圆点是否可以点击 111 } 112 var self=this; 113 this.time=null; 114 this.options=$.extend({},this.default,option); 115 self.flag=true; 116 // 插件入口 117 this.init=function(){ 118 this.bulid(); 119 } 120 this.bulid=function(){ 121 var self=this; 122 var wrap=self.options.boxWrap; 123 self.num=1; 124 self.nowTime=+new Date(); 125 self.width=$(window).width(); 126 var firstImg=$(wrap).find('li').first(); 127 var lastImg=$(wrap).find('li').last(); 128 $(wrap).append(firstImg.clone()); 129 $(wrap).prepend(lastImg.clone()); 130 self.length=$(wrap).find('li').length; 131 $(wrap).width(self.width*self.length); 132 $(wrap).find('li').width(self.width) 133 $(wrap).parent().height(480); 134 $(wrap).parent().width(self.width); 135 $(wrap).css({'left':-self.width*self.num}) 136 // 是否启动自动轮播 137 if(self.options.autoPlay){ 138 self.plays(); 139 } 140 // 是否启动按钮 141 if(self.options.nextBtn){ 142 self.NextBtn(); 143 } 144 // 是否启动按钮 145 if(self.options.prevBtn){ 146 self.prevBtn(); 147 } 148 // 是否启动小圆点 149 if(self.options.circle){ 150 self.circle() 151 } 152 if(self.options.circleClick){ 153 self.clickCircle(); 154 } 155 156 } 157 // // 鼠标移入时 158 self.on('mouseenter',function(){ 159 self.stops(); 160 }) 161 // 鼠标移出时 162 self.on('mouseleave',function(){ 163 self.plays(1); 164 }) 165 166 // 开始计时器，自动轮播 167 this.plays=function(){ 168 var self=this; 169 // self.stops(); 170 console.log('play') 171 this.time=setInterval(function(){ 172 self.go(-self.width) 173 },self.options.times); 174 } 175 // 停止计时器 176 this.stops=function(){ 177 console.log('stop'); 178 clearInterval(self.time) 179 } 180 // 手动创建按钮元素 181 this.prevBtn=function(){ 182 var self=this; 183 var ele=$("<a href='javascript:;' id='prevBtn'><</a>"); 184 self.append(ele); 185 $('#prevBtn').bind("click",function(){ 186 self.go(self.width); 187 }) 188 } 189 // 手动创建按钮元素 190 this.NextBtn=function(){ 191 var self=this; 192 var ele=$("<a href='javascript:;' id='nextBtn'>></a>"); 193 self.append(ele) 194 $('#nextBtn').bind("click",function(){ 195 self.go(-self.width); 196 }) 197 } 198 // 手动创建小圆点 199 this.circle=function(){ 200 var self=this; 201 var ele=$('<div id="circle-wrap"></div>'); 202 for(var i=0;i<self.length-2;i++){ 203 $('<a class="dot" href="javascript:;"></a>').appendTo(ele) 204 } 205 ele.css({ 206 "position":"absolute", 207 'bottom':'0', 208 'right':'0', 209 'left':'0', 210 'height':'20px', 211 "padding":"0 10px", 212 'text-align':self.options.circleAlign 213 }); 214 self.append(ele); 215 self.playCircle(this.num-1); 216 217 } 218 //小圆点指定当前项 219 this.playCircle=function(num){ 220 $('#circle-wrap').find('.dot').eq(num).addClass('on').siblings().removeClass('on'); 221 } 222 // 点击小圆点 223 this.clickCircle=function(){ 224 var self=this; 225 $('#circle-wrap').find('.dot').on('click',function(){ 226 self.num=$(this).index()+1; 227 self.circlePlay() 228 }) 229 } 230 // 点击小圆点，图片切换 231 this.circlePlay=function(){ 232 self.flag=true; 233 if(self.flag){ 234 self.flag=false; 235 $(self.options.boxWrap).stop().animate({ 236 'left':-self.num*self.width 237 },self.options.speed,function(){ 238 self.flag=true; 239 }); 240 } 241 self.playCircle(this.num-1); 242 } 243 // 点击按钮，进行轮播,以及自动轮播 244 this.go=function(offset){ 245 var self=this; 246 if(self.flag){ 247 self.flag=false; 248 if(offset<0){ 249 self.num++; 250 if(self.num>self.length-2){ 251 self.num=1; 252 } 253 } 254 if(offset>0){ 255 self.num--; 256 if(self.num<=0){ 257 self.num=self.length-2 258 } 259 } 260 if(Math.ceil($(self.options.boxWrap).position().left)<-(self.length-2)*self.width){ 261 $(self.options.boxWrap).css({ 262 'left':-self.width 263 }); 264 } 265 if(Math.ceil($(self.options.boxWrap).position().left)>-self.length){ 266 $(self.options.boxWrap).css({ 267 'left':-self.width*(self.length-2) 268 }) 269 } 270 self.playCircle(this.num-1); 271 $(self.options.boxWrap).stop().animate({ 272 'left':$(self.options.boxWrap).position().left+offset 273 },self.options.speed,function(){ 274 self.flag=true; 275 }); 276 } 277 } 278 this.init(); 279 } 280 })(jQuery,window,document) 281 $('#banner').bannerSwiper({ 282 boxWrap:"#banner-wrap", 283 nextBtn:true, 284 prevBtn:true, 285 autoPlay:true, 286 circle:true, 287 circleClick:true 288 }) 289 </script> 290 </body> 291 </html>