用js實現輪播圖

HTMl部分

 1 <div id="box">
 2         <div class="inner">
 3             <ul>
 4                 <li><a href=""><img src="./images/1.jpg" alt=""></a></li>
 5                 <li><a href=""><img src="./images/2.jpg" alt=""></a></li>
 6                 <li><a href=""><img src="./images/3.jpg" alt=""></a></li>
 7                 <li><a href=""><img src="./images/4.jpg" alt=""></a></li>
 8                 <li><a href=""><img src="./images/5.jpg" alt=""></a></li>
 9             </ul>
10             <ol></ol>
11             <div id="circle">
12                 <span id="left" class="arr">&lt;</span>
13                 <span id="right" class="arr">&gt;</span>
14             </div>
15         </div>
16     </div>

CSS部分

 1 <style>
 2         * {
 3             margin: 0;
 4             padding: 0;
 5         }
 6 
 7         #box {
 8             width: 700px;
 9             height: 400px;
10             padding: 5px;
11             margin: 200px auto;
12             border: 1px solid #ccc;
13         }
14 
15         .inner {
16             width: 100%;
17             height: 100%;
18             position: relative;
19             overflow: hidden;
20         }
21 
22         .inner ul {
23             width: 1000%;
24             height: 100%;
25             position: absolute;
26             top: 0;
27             left: 0;
28         }
29 
30         .inner li {
31             list-style: none;
32             float: left;
33         }
34 
35         .inner img {
36             width: 700px;
37             height: 400px;
38             vertical-align: top;
39         }
40 
41         ol {
42             position: absolute;
43             bottom: 20px;
44             left: 50%;
45             transform: translate(-50%, 0);
46         }
47 
48         ol li {
49             width: 12px;
50             height: 12px;
51             background-color: rgba(255, 255, 255, .3);
52             border-radius: 50%;
53             margin-right: 10px;
54             cursor: pointer;
55         }
56 
57         ol .current {
58             background-color: red;
59         }
60 
61         #circle {
62             display: none;
63         }
64 
65         #circle span:hover {
66             background-color: rgba(255, 0, 0, .7);
67         }
68 
69         #circle .arr {
70             position: absolute;
71             top: 50%;
72             transform: translate(0, -50%);
73             width: 50px;
74             height: 50px;
75             line-height: 50px;
76             text-align: center;
77             background-color: rgba(0, 0, 0, .5);
78             color: #fff;
79             font-size: 40px;
80             cursor: pointer;
81         }
82 
83         #left {
84             left: 0;
85         }
86 
87         #right {
88             right: 0;
89         }
90     </style>

js部分

  1 <script>
  2     //懶得寫document.getElementById,因此聲明瞭一個函數
  3     function byid(id) {
  4         return document.getElementById(id);
  5     }
  6 
  7     //動畫函數，爲下面的輪播圖作鋪墊
  8     function animate(element, target) {
  9         //首先先清除一遍定時器
 10         clearInterval(element.timeID);
 11 
 12         //經過對象屬性的方式建立一個定時器，避免重複建立從而消耗內存
 13         element.timeID = setInterval(function () {
 14             //先獲取目標元素當前的位置（及定位後的left值）
 15             var current = element.offsetLeft;
 16             //定義每次移動的距離
 17             var step = 15;
 18             //判斷當前位置與目標位置的關係，若是當前位置小於目標位置走「正」距離，反之走「負」距離
 19             step = current < target ? step : -step;
 20             //獲得即將到達的位置
 21             current += step;
 22             //判斷若是目標位置與當前位置的差值大於每次移動的距離，及移動
 23             if (Math.abs(current - target) > Math.abs(step)) {
 24                 element.style.left = current + "px";
 25             } else { //判斷若是目標位置與當前位置的差值小於每次移動的距離，清除定時器，而且直接到達目標位置
 26                 clearInterval(element.timeID);
 27                 element.style.left = target + "px";
 28             }
 29         }, 25);
 30     }
 31     //定義一個全局變量，爲顏色同步作準備
 32     var num = 0;
 33     //獲取最外層div
 34     var box = byid("box");
 35     //獲取相框=id爲inner的div
 36     var inner = box.children[0];
 37     //獲取相框的長度
 38     var innerWidth = inner.offsetWidth;
 39     //獲取ul
 40     var ulObjs = inner.children[0];
 41     //獲取ul裏的全部li
 42     var listObjs = ulObjs.children;
 43     //獲取ol
 44     var olObjs = inner.children[1];
 45     //獲取小圓點的父級元素
 46     var circle = byid("circle");
 47     //循環遍歷
 48     for (var i = 0; i < listObjs.length; i++) {
 49         //建立li元素
 50         var liObjs = document.createElement("li");
 51         //將建立的元素添加到ol元素中
 52         olObjs.appendChild(liObjs);
 53         //給每一個小圓點自定義屬性，存儲i值
 54         liObjs.setAttribute("index", i);
 55         //給第一個小圓點添加樣式
 56         olObjs.children[0].className = "current";
 57         //給每一個小圓點作鼠標進入事件
 58         liObjs.onmouseover = function () {
 59             //首先刪除全部小圓點的類樣式
 60             for (var j = 0; j < olObjs.children.length; j++) {
 61                 olObjs.children[j].removeAttribute("class");
 62             }
 63             //給當前作鼠標進入事件的小圓點添加樣式
 64             this.className = "current";
 65             //獲取當前圓點的自定義屬性值，爲下面的移動作鋪墊
 66             num = this.getAttribute("index");
 67             //利用上面建立好函數經過移動ul的lifet值表現出移動效果
 68             animate(ulObjs, -innerWidth * num);
 69         };
 70     }
 71     //鼠標進入出現箭頭
 72     box.onmouseover = function () {
 73         circle.style.display = "block";
 74         //清除定時器
 75         clearInterval(timeId);
 76     };
 77     //鼠標離開隱藏箭頭
 78     box.onmouseout = function () {
 79         circle.style.display = "none";
 80         //從新賦值定時器
 81         timeId = setInterval(carousel, 1500);
 82     };
 83     //建立一個定時器實現自動播放效果
 84     var timeId = setInterval(carousel, 1500);
 85     //克隆ul裏的最後一張圖片，爲實現無縫播放作鋪墊
 86     ulObjs.appendChild(listObjs[0].cloneNode(true));
 87     //右箭頭點擊事件
 88     byid("right").onclick = carousel;
 89 
 90     function carousel() {
 91         //先判斷索引值是否等於最大值（圖片個數），若是是跳到第二張圖片
 92         if (num == listObjs.length - 1) {
 93             num = 0;
 94             ulObjs.style.left = 0;
 95         }
 96         num++;
 97         //經過動畫函數實現點擊後圖片移動效果
 98         animate(ulObjs, -innerWidth * num);
 99         //實現小圓點顏色同步
100         if (num == listObjs.length - 1) {
101             olObjs.children[olObjs.children.length - 1].className = "";
102             olObjs.children[0].className = "current";
103         } else {
104             for (var i = 0; i < olObjs.children.length; i++) {
105                 olObjs.children[i].removeAttribute("class");
106             }
107             olObjs.children[num].className = "current";
108             console.log(num);
109         }
110     }
111     //左箭頭點擊事件
112     byid("left").onclick = function () {
113         if (num == 0) {
114             num = ulObjs.children.length - 1;
115             ulObjs.style.left = -(ulObjs.children.length - 1) * innerWidth + "px";
116         }
117         num--;
118         animate(ulObjs, -innerWidth * num);
119         for (var i = 0; i < olObjs.children.length; i++) {
120             olObjs.children[i].removeAttribute("class");
121         }
122         olObjs.children[num].className = "current";
123         console.log(num);
124     };
125 </script>