js實現固定大小輪播圖
阿新 • • 發佈：2020-11-03
效果圖：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; }.swipterWrap { width: 600px; height: 330px; margin: 100px auto; overflow: hidden; position: relative; box-sizing: border-box; } .swipter { width: 600px; height: 300px; overflow: hidden; border: 2px solid #0099cc; position: relative; box-sizing: border-box; } ul { transition: all .8s; width: 3000px; } ul>li { list-style: none; float: left; width: 600px; } ul>li img { width: 100%; height: 300px; display: inline-block; } .dots { width: 250px; height: 30px; left: 0; right: 0; margin: auto; display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; } .dots span { display: inline-block; width: 15px; height: 15px; border-radius: 50%; margin: 0px 10px; background-color: #0099cc; cursor: pointer; } .active { background-color: aliceblue !important; } .arrow { position: absolute; margin: auto; width: 100%; height: 50px; top: 0; bottom: 0; box-sizing: border-box; } .arrow div { width: 30px; height: 50px; background-color: #07a34e; text-align: center; font-size: 28px; color: #ffffff; } .arrow .left-arrow { float: left; } .arrow .right-arrow { float: right; } .arrow div span { display: inline-block; line-height: 50px; cursor: pointer; } .txt{ text-align: center; font-size: 20px; color: #1e75d9; cursor: pointer; } </style> </head> <body> <div class="swipterWrap"> <div class="swipter"> <ul class="imgList"> <li> <img src="https://cdn.pinduoduo.com/home/static/img/subject/girlclothes.jpg" alt="圖片1"> </li> <li> <img src="https://cdn.pinduoduo.com/home/static/img/subject/boyshirt.jpg" alt="圖片2"> </li> <li> <img src="https://cdn.pinduoduo.com/home/static/img/subject/medical.jpg" alt="圖片3"> </li> <li> <img src="https://cdn.pinduoduo.com/home/static/img/subject/food.jpg" alt="圖片4"> </li> <li> <img src="https://cdn.pinduoduo.com/home/static/img/subject/shoes.jpg" alt="圖片5"> </li> </ul> <!-- 左右箭頭 --> <div class="arrow"> <div class="left-arrow"><span> < </span> </div> <div class="right-arrow"><span> > </span></div> </div> <!-- 底部圓點 --> <div class="dots"> <span class="active"></span> <span></span> <span></span> <span></span> <span></span> </div> </div> <div class="txt">第1張圖片</div> </div> <script> (function () { //獲取要操作的dome 節點 let ul = document.getElementsByClassName('imgList')[0]; let liList = ul.getElementsByTagName("li"); // let liList = document.getElementsByTagName('li') let dots = document.getElementsByClassName('dots')[0].getElementsByTagName('span') let arrowLeft = document.getElementsByClassName('left-arrow')[0] let arrowRight = document.getElementsByClassName('right-arrow')[0] let swipterBox = document.getElementsByClassName('swipter')[0] let txt = document.getElementsByClassName('txt')[0] //定義一個索引值 記錄 當前是第幾張圖片 預設為0 第一張 let indexActive = 0; // 每次移動的距離 let move = `transform:translateX(0px)` //es6 新增 陣列語法 將偽陣列 轉換為陣列 dots = Array.from(dots) //底部圓點點選 dots.forEach((value, index) => { value.onclick = function () { //賦值索引 indexActive = index //執行輪播方法 swipterMoveFn() } }) // 右箭頭點選 arrowRight.onclick = () => { indexActive += 1 //判斷是否是最後一張圖片 if (indexActive >= liList.length) { indexActive = 0 } //執行輪播方法 swipterMoveFn() } //左箭頭點選 arrowLeft.onclick = () => { indexActive -= 1 //判斷是否是第一張圖片 if (indexActive < 0) { indexActive = liList.length - 1 } //執行輪播方法 swipterMoveFn() } //負責執行輪播的方法 function swipterMoveFn() { //每一次點選 清楚所有 dots 的 class dots.forEach(value => { value.className = ' ' }) txt.innerHTML = `第${indexActive+1}張圖片` dots[indexActive].className = "active" //新增移動 move 距離 當前索引 * 當前元素寬度 = 移動的距離 move = `transform:translateX(${indexActive * -600}px)` //給ul 新增 style ul.style = move } // 自動輪播 設定沒 1.5秒執行一次 let timing = setInterval(swipterTiming, 1500) //自動輪播方法 function swipterTiming() { indexActive += 1 //判斷是否是最後一張圖片 if (indexActive >= liList.length - 1) { indexActive = 0 } //呼叫 輪播圖方法 swipterMoveFn() } //滑鼠移入時 清除定時器 swipterBox.onmouseover = () => { clearInterval(timing) } //滑鼠移出 設定定時器 swipterBox.onmouseleave = () => { timing = setInterval(swipterTiming, 1500) } })() </script> </body> </html>
備註：如果要修改輪播圖的大小，只需要修改下面幾個值即可。