PC 端輪播圖的實現
阿新 • • 發佈：2020-10-26
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>輪播圖</title> <style> ul { margin: 0; padding: 0; list-style: none; } li{ display: inline-block; } .rotation { position: relative; margin: 50px auto; width: 300px; height: 200px; background-color: #ccc; overflow: hidden; } .rotation>ul { position: absolute; top: 0; height: 0; width: 600%; height: 100%; } .rotation>ul>li { float: left; width: 300px; height: 100%; } .rotation>ul>li img { width: 100%; height: 100%; } .dot { position: absolute; top: 93%; left: 50%; transform: translateX(-50%); width: 80px; height: 10px; /* background-color: rosybrown; */ } .dot ul { width: 100%; height: 100%; text-align: center; line-height: 10px; } .dot li { width: 5px; height: 5px; margin: 0 2px; /* background-color: #fff; */ border: 1px solid #ccc; border-radius: 5px; } .current { background-color: #fff; } .direction { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 18px; height: 38px; background-color: rgba(188, 143, 143, .5); font-size: 18px; color: #fff; line-height: 38px; text-align: center; cursor: pointer; } .previous { left: 0; } .next { right: 0; } </style> </head> <body> <div class="rotation"> <ul> <li> <a href="javascript:;"><img src="../img/bg1.jpg" alt="" srcset=""></a> </li> <li> <a href="javascript:;"><img src="../img/bg2.jpg" alt="" srcset=""></a> </li> <li> <a href="javascript:;"><img src="../img/bg3.jpg" alt="" srcset=""></a> </li> <li> <a href="javascript:;"><img src="../img/bg4.jpg" alt="" srcset=""></a> </li> </ul> <div class="direction previous"><</div> <div class="direction next">></div> <div class="dot"> <ul> </ul> </div> </div> <script src="../js/common-until.js"></script> <script> /** * 1. 滑鼠進入輪播介面出現上下切換按鈕 * 2. 小圓點顯示當前輪播頁並且可切換 * 3. 滑鼠懸浮在輪播介面時不自動切換 * 4. 自動切換圖片 */ // 頁面除css, 圖片,flash 等外載入完成執行 window.addEventListener('DOMContentLoaded', function() { let rotation = $my('.rotation'); // 輪播圖 let nodeList = $my('.direction', 1); // 方向標 let dotul = $my('.dot').querySelector('ul'); // 指示圓點 let rotationImg = rotation.querySelector('ul'); // 輪播內容 let rotationImgW = rotation.clientWidth; // 輪播內容寬度 let Imgnum = rotationImg.children.length; let currentNum = 0; // 當前輪播的圖片座標 let timer = null; // 輪播倒計時id let throttle = true; // 節流閥開關 // 動態生成指示小圓點 for (let i = 0; i < Imgnum; i++) { let li = document.createElement('li'); li.setAttribute('data-index', i); i == 0 ? li.className = 'current' : null; dotul.appendChild(li); } // 拷貝第一張圖用於實現無縫連線 let first = rotationImg.children[0].cloneNode(true); rotationImg.appendChild(first); Imgnum += 1; // 指示圓點點選切換輪播圖 dotul.addEventListener('click', function(e) { let target = e.target || e.srcElement; if (target.nodeName.toLowerCase() == 'li') { // debugger let _currentX = -(target.dataset.index * rotationImgW); currentNum = target.dataset.index; animate(rotationImg, 'x', _currentX); for (let i in dotul.children) { i == target.dataset.index ? dotul.children[i].className = 'current' : dotul.children[i].className = null; } } }) // 監聽輪播模組的滑鼠移動，進入顯示切換按鈕 rotation.addEventListener('mouseenter', function() { nodeList[0].style.display = 'block'; nodeList[1].style.display = 'block'; clearInterval(timer); }); rotation.addEventListener('mouseleave', function() { nodeList[0].style.display = 'none'; nodeList[1].style.display = 'none'; timer = setInterval(function() { nodeList[0].click(); }, 3000) }); // 監聽切換按鈕的點選事件 nodeList[0].addEventListener('click', function() { if (!throttle) { return; } throttle = false; if (currentNum == (Imgnum - 1)) { rotationImg.style.left = '0'; currentNum = 0; } currentNum++; animate(rotationImg, 'x', -currentNum * rotationImgW, () => throttle = true); let _currentNum = currentNum; _currentNum = _currentNum == Imgnum - 1 ? 0 : _currentNum; for (let i of dotul.children) { i.dataset.index == _currentNum ? i.className = 'current' : i.className = null; } }) nodeList[1].addEventListener('click', function() { if (!throttle) { return; } throttle = false; if (currentNum == 0) { rotationImg.style.left = (-Imgnum + 1) * rotationImgW + 'px'; currentNum = Imgnum - 1; }; currentNum--; animate(rotationImg, 'x', -currentNum * rotationImgW, () => throttle = true); let _currentNum = currentNum; _currentNum = _currentNum == Imgnum - 1 ? Imgnum - 2 : _currentNum; for (let i of dotul.children) { i.dataset.index == _currentNum ? i.className = 'current' : i.className = null; } }) // 自動輪播 timer = setInterval(function() { nodeList[0].click(); }, 3000) }) </script> </body> </html>