正文
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:;
padding:;
} .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:;
left:;
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>
