1. 原生js實現輪播圖 · 前端demo

## 原生js實現輪播圖 >#### 一. 最終呈現效果 1.點擊左右兩邊的箭頭切換圖片 2.當鼠標移出圖片范圍，自動切換下一張圖片；    當鼠標移入圖片范圍，停止切換下一張圖片 3.切換到某一張圖片時，底部的按鈕樣式也跟著改變 4.點擊按鈕即可切換到相應位置的圖片 ![](https://box.kancloud.cn/c1ebcdd3b999e430f28c0a7a1d89e9bb_492x335.png) >#### 二. 輪播圖片原理 **一系列的大小相等的圖片平鋪，利用CSS布局只顯示一張圖片，其余隱藏。通過計算偏移量利用定時器實現自動播放，或通過手動點擊事件切換圖片。** ![](https://box.kancloud.cn/172601e18172e4ee53feef568e04d2e0_618x248.png) (圖片來源：https://www.cnblogs.com/LIUYANZUO/p/5679753.html) >#### 三. 開始整個實例已上傳至[github](https://github.com/MrXuxu/H5_demo/tree/master/%E8%BD%AE%E6%92%AD%E5%9B%BE) ``` -lunbo.html -lunbo.css -test.js ``` 1. HTML ``` <body> <div id="container"> <div id="list" style="left: 0px"> <img src="images/landscape-test-1_1x.jpg" alt=""> <img src="images/render1_1x.jpg" alt=""> <img src="images/space_1x.jpg" alt=""> <img src="images/trees_1x.jpg" alt=""> </div> <div id="buttons"> <span index="1" class="on"></span> <span index="2"></span> <span index="3"></span> <span index="4"></span> </div> <a class="arrow" id="prev"><</a> <a class="arrow" id="next">></a> </div> <script src="js/test.js"></script> </body> ``` 2. CSS樣式 ``` * { margin: 0; padding: 0; text-decoration: none; } #container { margin: 20px auto; width: 400px; /*此寬度根據圖片寬度調整 */ height: 300px; /*此高度根據圖片寬度調整 */ border: 3px solid #333; overflow: hidden; /*為了將圖片隱藏*/ position: relative; } #list { width: 1600px; /*圖片總寬度*/ height: 300px; position: absolute; z-index: 1; } #list img { float: left; width: 400px; height: 300px; } #buttons { position: absolute; height: 10px; width: 100px; z-index: 2; /*將buttons放在list上層*/ bottom: 20px; right: 250px; } #buttons span { cursor: pointer; float: left; border: 1px solid aqua; border-radius: 50%; height: 10px; width: 10px; margin-right: 5px; background: #e98352; } #buttons .on { background: #474550; } .arrow { cursor: pointer; line-height: 60px; text-align: center; font-size: 30px; /*設置箭頭的大小*/ width: 40px; height: 60px; position: absolute; z-index: 2; /*將arrow放在list上層*/ top: 120px; color: #fff; } #prev { left: 0; } #next { right: 0; } #prev:hover, #next:hover { background: #333; } ``` 3. JavaScript ①. 點擊左右兩邊的箭頭切換圖片 ``` window.onload = function() { var list = document.getElementById("list"); var prev = document.getElementById("prev"); var next = document.getElementById("next"); function animate(offset){ /*獲取的style.left，是相對左邊獲取距離，所以第一張圖后style.left都為負值*/ /*且style.left獲取的是字符串，需要用parseInt()或者parseFloat()取整轉化為數字。*/ var newLeft = parseInt(list.style.left) + offset; list.style.left = newLeft + "px"; list.style.transition = '300ms ease'; //給動畫添加過渡時間 /*從最后一張偏移值到第一張*/ if(newLeft<=-1600){ list.style.left = 0 +'px'; } /*從第一張偏移值到最后第一張*/ if(newLeft>0){ list.style.left = -1200 +'px'; } } prev.onclick = function(){ animate(400); } next.onclick = function(){ animate(-400); } } ``` 當我們取消掉#container里的overflow: hidden時發現如圖： ![](https://box.kancloud.cn/3c25b0767b57beb55b8176bba3daca10_1011x351.png) ②. 當鼠標移出圖片范圍，自動切換下一張圖片；當鼠標移入圖片范圍，停止切換下一張圖片 **原理: 這個功能我們需要用到window對象的setInterval()間歇調用方法，所謂的間歇調用就是每隔指定的時間就執行一次代碼。** 在這我們需要鼠標移出圖片范圍，每隔指定時間就切換到下一張圖片。在代碼中插入： ``` var timer; function autoplay() { timer = setInterval(function(){ next.onclick() }, 2000); } autoplay(); ``` 當鼠標移入圖片范圍時，清除定時器 ``` /*---鼠標懸停停止---*/ var container = document.getElementById('container'); function stopplay() { clearInterval(timer); } container.onmouseover = stopplay; container.onmouseout = autoplay; ``` ③. 切換到某一張圖片時，底部的按鈕樣式也跟著改變 ``` var buttons = document.getElementById('buttons').getElementsByTagName('span'); var index = 1; function showButton() { //清除之前的樣式 for(let i = 0; i<buttons.length; i++){ if(buttons[i].className == 'on'){ buttons[i].className = ''; } } buttons[index-1].className = 'on'; } prev.onclick = function() { index -= 1; if(index < 1){ index = 4; } showButton(); animate(400); } next.onclick = function() { index += 1; if(index > 4){ index = 1; } showButton(); animate(-400); } ``` ④. 點擊按鈕即會切換到相應位置的圖片 ``` for(var i=0; i<buttons.length; i++){ buttons[i].onclick = function(){ var clickIndex = parseInt(this.getAttribute('index')); var offset = 400*(index - clickIndex); animate(offset); index = clickIndex; showButton(); } } ``` ---- 本文章參考[前端網:程序媛_小發](https://www.qdfuns.com/article/48075/631703471eadfdadbf28ef71ced2c5e8.html)，僅供學習使用。