面向對象的方法來寫輪播插件
阿新 • • 發佈：2017-12-11
cursor hid time parent 火狐 -s containe ddd field
其實寫輪播的插件很多 ，但是終歸不是自己寫的 ，改起來還是很麻煩的 ，看過各種各樣的輪播插件之後 ，自己寫了這個 ，可能不完美 ，但是可復用，還算簡潔，帶有自動輪播以及按鈕點擊，前後滑動效果，基本的輪播已經夠用了倒是。
HTML部分代碼-直接引用類傳入參數即可
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/css.css"/> <script src="js/jquery.js"></script> </head> <body> <div class="main"> <div class="container"> <ul class="list"> <li> <img src="images/a1.jpg" alt=""/> </li> <li> <img src="images/a2.jpg" alt=""/> </li> <li> <img src="images/a3.jpg" alt=""/> </li> <li> <img src="images/a2.jpg" alt=""/> </li> </ul> <ol class="iconList"> </ol> <a class="leftBtn"></a> <a class="rightBtn"></a> </div> </div> <script> $(function(){ var arg=new Slider({ mainBox:‘.main‘, conBox:‘.container‘, listBox:‘.list‘, listItem:‘.list li‘, iconList:‘.iconList‘, iconItem:‘.iconList li‘, imgSpeed:‘1000‘, boxNum:‘1‘, sliderSpeed:‘3000‘, autoplay:true, leftBtn:‘.leftBtn‘, rightBtn:‘.rightBtn‘ }) }); </script> </body> </html>
js代碼部分
function Slider(a){ this.mainBox= a.mainBox; this.conBox= a.conBox; this.listBox= a.listBox; this.listItem= a.listItem; this.iconList= a.iconList; this.iconItem= a.iconItem; this.leftBtn= a.leftBtn; this.rightBtn= a.rightBtn; this.autoplay= a.autoplay; this.sliderSpeed= a.sliderSpeed; this.imgSpeed= a.imgSpeed; this.boxNum= a.boxNum; this.init(); } Slider.prototype.init=function(){ var k=0; var w=0; var that=this; var timer=null; var list=$(this.listBox); var len=$(this.listItem).length; var width=parseInt($(this.listItem).css(‘width‘)); var num=Math.ceil(len/this.boxNum); // 添加小按鈕頁數 for(var i=0;i<num;i++){ var j=i+1; $(this.iconList).append(‘<li>‘+(i+1)+‘</li>‘) } $(this.iconItem).eq(0).addClass(‘active‘); list.append($(this.listItem).eq(0).clone(true)); // 小按鈕頁數點擊事件 $(this.iconList).on(‘click‘,‘li‘,function(){ k=$(this).index(); w=$(this).index(); $(that.iconItem).eq(k).addClass(‘active‘).siblings().removeClass(‘active‘); list.stop().animate({"left":k*width*-1+"px"},that.imgSpeed); }) // 判斷輪播狀態 if(this.autoplay===true){ timer=setInterval(function(){ autoPlay(); },that.sliderSpeed) } // 左按鈕點擊事件 $(this.leftBtn).on(‘click‘,function(){ clearInterval(timer); leftSlider(); }); // 右按鈕點擊事件 $(this.rightBtn).on(‘click‘,function(){ clearInterval(timer); rightSlider(); }) if(this.autoplay===true){ (function hover(){ $(that.conBox+‘ a‘).hover(function(){ clearInterval(timer); timer=null; },function(){ timer=setInterval(function(){ autoPlay(); },that.sliderSpeed) }) })() } //自動輪播 function autoPlay(){ k++; w++; if(k>num-1){ k=0; } $(that.iconItem).eq(k).addClass("active").siblings().removeClass("active"); if(w>num){ w=1; list.css(‘left‘,‘0px‘); } list.stop().animate({"left":w*width*-1+"px"},that.imgSpeed); } function leftSlider(){ k--; w--; if(k<0){ k=num-1; } $(that.iconItem).eq(k).addClass(‘active‘).siblings().removeClass(‘active‘); if(w<0){ list.css({"left":len*width*-1}); w=num-1; } list.stop().animate({"left":w*width*-1+"px"},that.imgSpeed); } function rightSlider(){ autoPlay(); } }
css代碼部分
/*css reset*/ body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,p,input,select,textarea,form{margin: 0; padding: 0;} body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset,img, legend, input, textarea, p, blockquote, th, td, em, i, b, button, font, span { margin: 0; padding: 0; list-style: none; font-style: normal; font-weight: normal; font-family: "microsoft yahei"; } *{box-sizing: border-box} body{font:16px/1.5 "宋體";} img{border:none;} ul,ol{list-style:none;} input,select,textarea{outline:none;border:none;background:none;} textarea{resize:none;} a{text-decoration:none;} /*清浮動*/ .clearfix:after{content:""; display: block;clear: both; *display:block; *clear:both;} .clearfix{zoom:1;} /*選擇*/ ::selection {background-color:#669900; color:#ffffff; text-shadow:none;} ::-moz-selection {background-color:#669900; color:#ffffff;text-shadow:none;} /*去掉a的下劃線*/ a {blr:expression(this.onFocus=this.blur())} /*if IE*/ a {outline:none; color: #000;}/*if 火狐等現代瀏覽器瀏覽器*/ /*浮動*/ .left{float: left} .right{float: right} .parent_position{position: relative} *{ box-sizing: border-box; } ul,ol,li { padding: 0; margin: 0; } .container{ width: 500px; height: 300px; margin: 0 auto; border: 1px solid #dddddd; overflow: hidden; position: relative; } .list{ width: 9999999px; height: 300px; left: 0; position: absolute; } .list li{ float: left; } .iconList{ text-align: center; position: absolute; bottom: 10px; /*border: 1px solid #dddddd;*/ height: 20px; left: 50%; margin-left: -45px; overflow: hidden; width: 160px; } .iconList li{ width:20px; height: 20px; /*border: 2px solid #ffffff;*/ border-radius: 50%; float: left; margin-left:10px; color: #000000; background: #ffffff; cursor: pointer; z-index: 10; font-size: 10px; } .iconList li.active{ color: #ffffff; background: #ff0000;; } .list li img{ width: 500px; height: 300px; } .leftBtn,.rightBtn{ position: absolute; top: 44%; width: 25px; height: 30px; cursor: pointer; } .leftBtn{ left: 10px; background: url(../images/s_btn.png) 0px 0px no-repeat; } .rightBtn{ right: 10px; background: url(../images/s_btn.png) 0px -40px no-repeat; }
面向對象的方法來寫輪播插件