案例分析 | 貝殼找房：自我顛覆的整合式創新引領產業數字化
阿新 • • 發佈：2022-04-15
輪播圖作為前端比較簡易的動畫，使用非常頻繁，這裡記錄以便使用
此輪播圖為最簡易自動播放，無縫輪播，有按鈕，有序號跳轉小點
html佈局如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>輪播圖</title> <link rel="stylesheet" href="./reset.css"> <link rel="stylesheet" href="./lunbo.css"> </head> <body> <div class="baner"> <ul class=" baner-top clearfix"> <li><a href=""><img src="./img/1.jpg" alt=""></a></li> <li><a href=""><img src="./img/2.jpg" alt=""></a></li> <li><a href=""><img src="./img/3.jpg" alt=""></a></li> <li><a href=""><img src="./img/4.jpg" alt=""></a></li> <li><a href=""><img src="./img/5.jpg" alt=""></a></li> </ul> <div class="left-gt"> ＜ </div> <div class="right-gt"> ＞ </div> <ol class="baner-bottom"></ol> </div> <script src="./lunbo.js"></script> </body> </html>
css樣式如下:
.baner { width: 1200px; height: 500px; margin: 0 auto; position: relative; overflow: hidden; margin-top: 100px; } .baner>.baner-top { top: 0; left: 0px; width: 7200px; position: absolute; } .baner>.baner-top>li { float: left; } .baner>.baner-bottom>li { float: left; background-color: #fff; opacity: 0.5; width: 40px; height: 5px; border-radius: 5px; margin: 0 5px; } .baner>.baner-bottom { position: absolute; bottom: 10px; left: 50%; transform: translate(-50%, 0); } .left-gt { height: 36px; width: 36px; cursor: pointer; border-radius: 50%; background-color: rgba(31, 45, 61, .11); color: #fff; position: absolute; top: 50%; z-index: 10; transform: translateY(-50%); text-align: center; font-size: 12px; line-height: 36px; left: 10px; display: none; } .right-gt { height: 36px; width: 36px; cursor: pointer; border-radius: 50%; background-color: rgba(31, 45, 61, .11); color: #fff; position: absolute; top: 50%; z-index: 10; transform: translateY(-50%); text-align: center; font-size: 12px; line-height: 36px; right: 10px; display: none; } .baner:hover .left-gt { display: block; } .baner:hover .right-gt { display: block; } .baner-bottom>li:hover { opacity: 0.8; } .current { opacity: 1 !important; }
js程式碼如下:
//1.獲取元素 var ul = document.querySelector('.baner-top') var ol = document.querySelector('ol') var ul_li = document.querySelectorAll('.baner-top>li') var left_gt = document.querySelector('.left-gt') var right_gt = document.querySelector('.right-gt') var baner = document.querySelector('.baner') var first window.addEventListener('load', function () { first = ul_li[0].offsetWidth }) //3:動態生成小圓圈,有幾張圖片就生成幾個小圓圈 for (let i = 0; i < ul_li.length; i++) { //建立一個小li var li = document.createElement('li') //將小li插入到ol裡面 ol.appendChild(li) //4:小圓圈的排他思想,在生成小圓圈的時候直接繫結點選事件 li.addEventListener('click', function () { for (let i = 0; i < ul_li.length; i++) { ol.children[i].className = '' } this.className = 'current' //5.點選小圓圈 移動圖片,即移動ul //當點選某個小li,就可以拿到當前小li的索引號 num = nums = i animate(ul, -i * first) }) } ol.firstChild.className = 'current' //6.克隆第一圖片(li)放到ul最後面 var li = ul_li[0].cloneNode(true) ul.appendChild(li) //7.點選右側按鈕,圖片滾動一張 var baner_num = 0 var nums = 0 right_gt.addEventListener('click', function () { if (baner_num == ul.children.length - 1) { ul.style.left = 0 baner_num = 0 } baner_num++ animate(ul, -baner_num * first) //8.點選右側按鈕,小圓圈會跟隨一起變化 nums++ //如果nums=4,就復原 if (nums == ol.children.length) { nums = 0 } for (let i = 0; i < ol.children.length; i++) { ol.children[i].className = '' } ol.children[nums].className = 'current' }) //9.左側按鈕做法 left_gt.addEventListener('click', function () { if (baner_num == 0) { baner_num = ul.children.length - 1 ul.style.left = -baner_num * first + 'px' } baner_num-- animate(ul, -baner_num * first) nums-- //如果nums<0,說明第一張圖片,則小圓圈改為第四個圖片 if (nums < 0) { nums = ol.children.length - 1 } for (let i = 0; i < ol.children.length; i++) { ol.children[i].className = '' } ol.children[nums].className = 'current' }) var timer = setInterval(function () { right_gt.click() }, 2000) //2. 滑鼠經過箭頭顯示,否則隱藏 baner.addEventListener('mouseenter', function () { clearInterval(timer) timer = null }) baner.addEventListener('mouseleave', function () { clearInterval(timer) timer = setInterval(function () { right_gt.click() }, 2000) })
注意: 在輪播圖中引用了緩動動畫animate函式,此函式封裝在本人上一篇文章當中,可以參考 實現完整版的輪播圖