輪播圖swiper js方法
阿新 • • 發佈：2021-12-17
<!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>Document</title> <style> *{ padding:0; margin: 0; list-style: none; } body{ display: flex; height: 100vh; align-items: center; justify-content: center; background-color: aqua; } .shell { width: 900px; height: 500px; position: relative; overflow: hidden; border-radius: 5px; border: 10px #fff solid; box-shadow: 20px 30px 20px rgba(0,0,0,.5); } .images{ width: 300%; height: 100%; display: flex; position: absolute; left: 0; transition: .2s; } .img{ width:100%; background-size: cover; } .img:nth-child(1){ background-image: url('images/1.jpeg'); } .img:nth-child(2){ background-image: url('images/2.jpeg'); } .img:nth-child(3){ background-image: url('images/3.jpeg'); } .mini-images{ display: flex; justify-content: space-evenly; position: absolute; bottom: 20px; width: 40%; z-index: 999; right: 10%; } .min{ width: 60px; height: 60px; cursor: pointer; border-radius: 50%; background-size: cover; border: solid 5px rgba(255,255,255,.5); /* 照片偏移量 */ background-position: -20px 0; } .min:nth-child(1){ background-image: url('images/1.jpeg'); } .min:nth-child(2){ background-image: url('images/2.jpeg'); } .min:nth-child(3){ background-image: url('images/3.jpeg'); } .button{ width: 100%; height: 100%; position: absolute; top:0; left: 0; display: flex; justify-content: space-between; user-select: none; } .button-left,.button-right{ font-size: 50px; height: 500px; background-color: rgba(160,190,255,.7); line-height: 500px; cursor: pointer; } </style> </head> <body> <div class="shell"> <ul class="images"> <li class="img"></li> <li class="img"></li> <li class="img"></li> </ul> <ul class="mini-images"> <li class="min"></li> <li class="min"></li> <li class="min"></li> </ul> <div class="button"> <div class="button-left"><</div> <div class="button-right">></div> </div> </div> <script> let left = document.querySelector('.button-left'); let right = document.querySelector('.button-right'); let min = document.querySelectorAll('.min'); let images = document.querySelector('.images'); let index = 0; let intervalometer; // 定時器 function position(){ images.style.left = (index * -100) + "%"; } // 右邊按鈕加 function add(){ if(index >= min.length -1){ index = 0; }else{ index ++ } } // 左邊按鈕減 function dele(){ if(index < 1 ){ index = min.length -1 }else{ index -- } } function timer(){ intervalometer = setInterval(() => { index ++; dele(); add(); position(); },3000) } left.addEventListener('click',() => { dele(); position(); clearInterval( intervalometer); timer(); }); right.addEventListener('click',() => { add(); position(); clearInterval( intervalometer); timer(); }); for(let i = 0; i< min.length; i++){ min[i].addEventListener('click',() => { index = i position(); clearInterval( intervalometer); timer(); }) } timer(); </script> </body> </html>