基於面向對象的圖片輪播（js原生代碼）

時間 2019-11-19

原文原文鏈接

不管你想走多遠，你都須要不斷地走下去。前端最精華的即是原生的js,這也是咱們前端工程師的技術分層的重要指標，也提現這你的代碼能力，開發的水平。廢話很少說，進入今天的主要分享————基於面向對象思想的圖片輪播。其效果以下所示：css

正如圖片所示這樣咱們要實現的效果，這裏與咱們以往不一樣的是咱們的佈局十分簡潔。其中html佈局以下：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的樣式設計。node

js.js代碼：css3

 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="&lt;"
26     spanleft.id="ltBtn";
27     this.containerId.appendChild(spanleft);
28     var spanright =$create("span");
29     spanright.innerHTML = "&gt;"
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，這樣的好處是，咱們之後能夠很方便地經過咱們的構造器來實現一個圖片輪播的效果，減小代碼冗餘，同時減小了變量命名的衝突；固然它也有弊端，對於小型項目不是很好，因此在開發工程須要考慮。web

這次開發中，咱們須要首先實現：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);
        }
    }