基于面向对象的图片轮播（js原生代码）
無論你想走多遠，你都需要不斷地走下去。前端最精華的便是原生的js,這也是我們前端工程師的技術分層的重要指標，也提現這你的代碼能力，開發的水平。廢話不多說，進入今天的主要分享————基于面向對象思想的圖片輪播。其效果如下所示：
正如圖片所示這樣我們要實現的效果，這里與我們以往不同的是我們的布局十分簡潔。其中html布局如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="index.css"> 7 <script src="tools.js"></script> 8 <script src="js.js"></script> 9 </head> 10 <body> 11 <div class="container" id="slide1"> 12 <ul> 13 <li><a href=""><img src="images/1.jpg" alt="文字1"></a></li> 14 <li><a href=""><img src="images/2.jpg" alt="文字2"></a></li> 15 <li><a href=""><img src="images/3.jpg" alt="文字3"></a></li> 16 <li><a href=""><img src="images/4.jpg" alt="文字4"></a></li> 17 </ul> 18 </div> 19 <script> 20 var s = new Slider("slide1"); 21 console.info(s); 22 </script> 23 </body> 24 </html>樣式文件index.css
1 ul,ol,li{padding:0;margin:0;list-style: none;} 2 .container{ 3 width: 500px; 4 height: 300px; 5 margin:50px auto; 6 position: relative; 7 } 8 #msg{ 9 width:100%; 10 height:40px; 11 line-height: 40px; 12 text-indent:10px; 13 position:absolute; 14 bottom:0px; 15 left:0; 16 color:white; 17 font-size: 16px; 18 background:rgba(0,0,0,.8); 19 cursor:pointer; 20 z-index:1; 21 } 22 ul li a{display: block;} 23 img{width: 500px;height: 300px;} 24 ol{position: absolute;bottom:10px; left:50%; -webkit-transform:translateX(-50%); background:rgba(255,255,255,.6);border-radius:7px;padding:3px;z-index:2;} 25 ol li{background: red; float:left; width:8px; height:8px;margin-left:5px; -webkit-border-radius:4px;-mz-border-radius:4px;margin-right: 7px} 26 span{ 27 width:30px; 28 height:45px; 29 line-height: 45px; 30 font-size:40px; 31 color:white; 32 background:rgba(255,255,255,.3); 33 cursor:pointer; 34 position:absolute; 35 font-weight: bold; 36 top:50%; 37 left:0; 38 -webkit-transform:translateY(-50%); 39 -mz-transform:translateY(-50%); 40 -webkit-transition:all 1s ease 0s; 41 } 42 #rtBtn{ 43 right:0; 44 left:auto; 45 } 46 span:hover{ 47 -webkit-transform:rotateY(40deg) translateX(-30px) scale(1.2); 48 }注意這里的瀏覽器兼容，我這里只兼容了內核為-webkit-的；同時注意這里的ol和div的樣式設計。
js.js代碼：
1 function Slider(containerId){ 2 this.containerId = $(containerId); 3 this.ullis =$get($get(containerId,"ul")[0],"li"); 4 this.num = this.ullis.length; 5 this.ollis =this.createList(); 6 this.indexA = 1; 7 this.timer; 8 this.init(this.indexA); 9 this.ltBtn = $("ltBtn"); 10 this.rtBtn = $("rtBtn"); 11 this.mouseenter(); 12 this.autoplay(this.indexA); 13 console.info(this.ollis); 14 } 15 Slider.prototype.createList =function(){//創建ol 16 var ol = $create("ol"); 17 var lis = []; 18 for(var i = 0; i<this.num;i ){ 19 var li = $create("li"); 20 ol.appendChild(li); 21 lis.push(li); 22 } 23 this.containerId.appendChild(ol); 24 var spanleft = $create("span") 25 spanleft.innerHTML="<" 26 spanleft.id="ltBtn"; 27 this.containerId.appendChild(spanleft); 28 var spanright =$create("span"); 29 spanright.innerHTML = ">" 30 spanright.id = "rtBtn"; 31 this.containerId.appendChild(spanright); 32 var div = $create("div") 33 div.id= "msg"; 34 this.containerId.appendChild(div); 35 return lis; 36 } 37 Slider.prototype.init =function(index){ 38 this.moveto(index); 39 } 40 Slider.prototype.mouseenter =function(){ 41 var that = this; 42 for (var i = 0; i < this.num; i ) { 43 this.ollis[i].index = i; 44 this.ollis[i].onmouseenter = function(){ 45 that.moveto(this.index); 46 } 47 } 48 this.ltBtn.onclick = function(){ 49 if(that.indexA>0){ 50 that.indexA--; 51 that.moveto(that.indexA); 52 }else{ 53 that.indexA=that.num-1; 54 that.moveto(that.indexA); 55 } 56 } 57 this.rtBtn.onclick = function(){ 58 if(that.indexA<that.num-1){ 59 that.indexA ; 60 that.moveto(that.indexA); 61 }else{ 62 that.indexA = 0; 63 that.moveto(that.indexA); 64 } 65 } 66 } 67 Slider.prototype.moveto =function(index){ 68 for (var i = 0; i < this.num; i ) { 69 this.ullis[i].style.display="none"; 70 this.ollis[i].style.backgroundColor="red"; 71 } 72 this.ullis[index].style.display="block"; 73 this.ollis[index].style.backgroundColor="blue"; 74 $("msg").innerHTML = this.ullis[index].firstChild.firstChild.alt; 75 } 76 Slider.prototype.autoplay= function(indexA){ 77 var that =this; 78 79 that.timer = setInterval(function(){ 80 indexA%=that.num; 81 that.moveto(indexA); 82 indexA ; 83 },3000); 84 that.containerId.onmouseenter =function(){ 85 clearInterval(that.timer); 86 console.info(that.containerId); 87 } 88 that.containerId.onmouseleave = function(){ 89 that.autoplay(indexA) 90 } 91 92 }?簡單講一下：此次開發的大致思想，首先我們在html中首先生成一個對象構造器——即Slider，這樣的好處是，我們以后可以很方便地通過我們的構造器來實現一個圖片輪播的效果，減少代碼冗余，同時減少了變量命名的沖突；當然它也有弊端，對于小型項目不是很好，所以在開發工程需要考慮。
此次開發中，我們需要首先實現：html架構和簡單的樣式操作，這里我們只需要下次添加我們需要的圖片輪播的圖片資源和整個容器div就可以了，減少了對應的輪播導航下標的編寫，提現了代碼的簡單性，更適合小白類開發的編寫。
這里遇到的問題有：
1.如何創建一個元素，如何給創建的元素添加到需要的父親結點上
2.如何給生成的標簽添加類名，以及屬性
解決辦法
1.利用 var li =document.creatElement("li")來創建新的屬性標簽，即dom操作。
創建dom元素（createElement（）創建元素，createTextNode（）創建文本結點）并且添加 appendChild()示例如下：?
<div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div><script> var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node);var element=document.getElementById("div1"); element.appendChild(para); </script>2.屬性的操作和修改：
這里對于創建的元素的類名和id進行演示
<!DOCTYPE html> <html lang="en"> <header> <meta charset ="utf-8"> <style> .cur{ color:red; } </style> <title>創建元素</title> </header> <body> <ul id="content"> </ul> <script> var li = document.createElement("li"); li.classList.value = "cur"; li.innerHTML = "今天我學習面向對象開發思想"; document.getElementById("content").appendChild(li); </script> </body> </html>效果圖:
?
?前端開發中的樣式設計：一般思路首先對于大型網站的開發，我們需要統一設計初始化樣式，一般文件名是：base.css,其中是我們對于所有瀏覽器統一使用的一個文件類型，其中設計代碼如下：
1 @charset "utf-8"; 2 3 /* CSS reset */ 4 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} 5 table{border-collapse:collapse;border-spacing:0;} 6 fieldset,img {border:0;} 7 img{vertical-align: top;} 8 address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} 9 ol,ul {list-style:none;} 10 capation,th{text-align:left;} 11 h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} 12 q:before, q:after{content:'';} 13 abbr,acronym{border:0;} 14 15 .tl{text-align:left;} 16 .tc{text-align:center;} 17 .tr{text-align:right;} 18 .bc{margin-left:auto;margin-right:auto;} /*塊狀元素集中對齊 block center*/ 19 .fl{float:left;display:inline;} /* 可修復IE6中雙倍邊距bug */ 20 .fr{float:right;display:inline;} 21 .cb{clear:both;} 22 .overflow-h{overflow:hidden;} 23 24 .clearfix:after{ 25 content:''; 26 display:block; 27 height:0; 28 visibility: hidden; 29 clear:both; 30 } 31 .clearfix{ /*IE6中的解決方案*/ 32 zoom:1; 33 }注意這里我添加了一個新的類，通過偽對象的方法來解決浮動造成的塌陷問題，常用的解決浮動塌陷的方法是
1.給使用float元素的父類結束前添加一個高為0，寬為0并且有clear：both樣式的div；
2.在使用float元素的父類元素添加overflow：hidden
3.使用after偽對象清除浮動，如上面的代碼顯示。
在項目開發中樣式設計過程中，我們不會去修改其他工程師已經編寫的樣式，而是在他們的基礎上，我們添加新的樣式，來覆蓋他們的樣式；這樣的好處，可以避免修改樣式而毀壞原來的樣式，而影響到項目的開發。我們常用的開發的插件，如在手機端開發常用的圖片輪播插件的樣式設計，我們也是在后面修改的。
一般我們會把通用的一些樣式寫在一個新的css文件中，提供給大家使用，把一些對應的的樣式寫在index.css文件中。注意這里使用了css3中新增的屬性：transfrom,border-radius,rotate(),rgba()來實現背景色變化，在IE瀏覽器中不兼容，需要寫成background：rgb(255,255,255);filter(alpha(opacity=60));今天就大致說到這里吧。
js.js文件
注意這里不是光引用這個文件就可以了，而是在html中通過var s = new Slider("id");來調用我們編寫的構造器。注意在編寫程序的時候，不要一開始寫完了js構造器所有的代碼在去調用，因為這樣不方便檢查我們的編寫是否出現了出現了錯誤，這里推薦下錯誤檢查方法：一般都老鳥都會通過console.info（）或者console.log()來答應我們的變量或者傳遞的參數，還以可以通過打印一個變量來檢測我們的代碼是否執行，是否有效，常見的錯誤類型有語法錯誤，引用類型錯誤，邏輯錯誤等，所以要注意錯誤類型并且及時修改。
工具文件，我們可以把我們常用的方法封裝成一個函數，通過傳遞形參的形式來獲得我們需要的元素和效果，如下面所示的tools.js
function $(id){return document.getElementById(id); } function $get(containerId,tagName){if(typeof containerId =="string" && $(containerId)){return $(containerId).getElementsByTagName(tagName);}else if(typeof containerId=="object"){return containerId.getElementsByTagName(tagName);}else{throw ("你寫的第一個參數不是一個ID");} } function $create(TagName,attr){var dom = document.createElement(TagName);for(var p in attr){dom[p] = attr[p];}return dom; }?
最后我們分析一下構造器中需要的屬性：
1.創建對應的ol導航和對應的按鈕
2.初始化所有的樣式操作
3.顯示在對應的容器操作
4.鼠標進入事件
5.自動播放事件
在這些基本的事件中我們需要注意調用的順序，如：創建肯定在初始化之前。我們可以把一些通用的屬性放在原型鏈中來編寫，這樣的好處減少了變量空間占用和多次訪問屬性的效果。
遇到的問題：
1.其中的this指代問題：這里的解決辦法是在鼠標進入之前的函數中緩存一下var that = this。 這樣就可以訪問屬性了。
2.圖片輪播判斷：向左點擊的時候， 如果當前的索引值大于零，讓它執行自減操作，如果不大于0 就讓他等于對應圖片長度-1；
向右點擊的時候，當前的索引值小于它對應的輪播圖片的長度-1，執行自加1操作，超過圖片輪播長度時，索引值等于0，代碼如下所示
this.ltBtn.onclick = function(){if(that.indexA>0){that.indexA--;that.moveto(that.indexA);}else{that.indexA=that.num-1;that.moveto(that.indexA);}}this.rtBtn.onclick = function(){if(that.indexA<that.num-1){that.indexA ;that.moveto(that.indexA);}else{that.indexA = 0;that.moveto(that.indexA);}}?
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的基于面向对象的图片轮播（js原生代码）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 5分钟搞定jQuery zepto.js
- 下一篇： Ajax jquery的库的简化版本