Js-带进度条的轮播图
带进度条的轮播图--原生JS实现
实现了图片自动轮播,左右按钮实现图片左右转换,下方原点或者缩小图点击选择其中的某一张图片,然后有红条实现图片的进度。
<div class="content"> <div class="box1"> <ul class="box1_1"> <li><img src="./img/1.jpeg" alt="" style="width: 640px"></li> <li><img src="./img/2.jpeg" alt="" style="width: 640px"></li> <li><img src="./img/3.jpeg" alt="" style="width: 640px"></li> <li><img src="./img/4.jpeg" alt="" style="width: 640px"></li> <li><img src="./img/5.jpeg" alt="" style="width: 640px"></li> </ul> <div class="box_left"><</div> <div class="box_right">></div> </div> <p class="p1"></p> <div class="box2"> <img src="./img/1.jpeg" alt="" style="width: 16%" class="img2 img_border"> <img src="./img/2.jpeg" alt="" style="width: 16%" class="img2"> <img src="./img/3.jpeg" alt="" style="width: 16%" class="img2"> <img src="./img/4.jpeg" alt="" style="width: 16%" class="img2"> <img src="./img/5.jpeg" alt="" style="width: 16%" class="img2"> </div> </div>
<style> * { margin: 0; padding: 0; } .content { width: 640px; height: auto; margin: 50px auto; } .box1 { width: 640px; height: 480px; position: relative; overflow: hidden; } .box1_1 { width: 3200px; height: 480px; list-style: none; position: absolute; top: 0; left: 0; transition: 0.7s; } li { float: left; } .box2 { width: 640px; display: flex; justify-content: space-around; margin-top: 20px; clear: both; } .box_left { width: 50px; height: 50px; line-height: 50px; font-size: 30px; color: white; position: absolute; top: 200px; left: 20px; background-color: rgba(182, 178, 178, 0.5); border-radius: 9px; text-align: center; display: none; } .box_right { width: 50px; height: 50px; line-height: 50px; font-size: 30px; color: white; position: absolute; top: 200px; right: 20px; background-color: rgba(182, 178, 178, 0.5); border-radius: 9px; text-align: center; display: none; } .p1 { width: 0%; height: 5px; background-color: red; } .img_border { border: 10px solid gray; } .box_left, .box_right{ cursor: pointer; } </style>
<script> let ul = document.getElementsByClassName("box1_1")[0]; let img2 = document.getElementsByClassName("img2"); let box1 = document.getElementsByClassName("box1")[0]; let content = document.getElementsByClassName("content")[0]; let box_left = document.getElementsByClassName("box_left")[0]; let box_right = document.getElementsByClassName("box_right")[0]; let p1 = document.getElementsByClassName("p1")[0]; let num = 0, stop,num1=0,stop1; let p_add = function(){ p1.style.width = num1+"%"; num1++; if(num1>100){ p1.style.width = 0+"%"; num1=0; clearInterval(stop1); } } let move = function () { stop1 = setInterval(p_add,19); num++; for (let i = 0; i < img2.length; i++) { if (i == num) { img2[i].classList.add("img_border"); break; } else { for (let i = 0; i < img2.length; i++) { img2[i].classList.remove("img_border"); } } } ul.style.left = -num * 640 + "px"; if (num == 5) { num = 0; ul.style.left = -num * 640 + "px"; img2[num].classList.add("img_border"); } } stop = setInterval(move, 2000); content.addEventListener("mouseover", function () { clearInterval(stop1); p1.style.width = 0+"%"; clearInterval(stop); box_left.style.display = "block"; box_right.style.display = "block"; }, false); content.addEventListener("mouseout", function () { stop = setInterval(move, 2000); box_left.style.display = "none"; box_right.style.display = "none"; }, false); box_left.addEventListener('click', function () { num--; if(num==-1){ num=4; } for(let i=0;i<img2.length;i++){ img2[i].classList.remove("img_border"); } img2[num].classList.add("img_border"); ul.style.left = -num*640+"px"; }, false); box_right.addEventListener('click', function () { num++; if(num==5){ num=0; } for(let i=0;i<img2.length;i++){ img2[i].classList.remove("img_border"); } img2[num].classList.add("img_border"); ul.style.left = -num*640+"px"; }, false); for(let i=0;i<img2.length;i++){ img2[i].index = i; img2[i].onclick = function(){ num = this.index; for(let j=0;j<img2.length;j++){ img2[j].classList.remove("img_border"); } img2[num].classList.add("img_border"); ul.style.left = -num*640+"px"; } } window.onblur = function(){ clearInterval(stop1); p1.style.width = 0+"%"; num1=0; clearInterval(stop); } window.onfocus = function(){ stop = setInterval(move, 2000); } </script>