麻烦老师看一下自动轮播的代码
来源：6-4 编写呼吸轮播特效
DanielDu87
2022-08-15 20:05:05
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.carousel {
position: relative;
width: 650px;
height: 360px;
margin: 10px auto;
background-color: orange;
}
.carousel ul {
position: relative;
left: 0;
width: 9999px;
height: 360px;
list-style: none;
}
ul li {
position: absolute;
top: 0;
left: 0;
transition: opacity 0.5s ease 0s;
opacity: 0;
}
ul li:first-child {
opacity: 1;
}
</style>
<body>
<div class="carousel">
<ul>
<li><img alt="" src="../images/beijing/1.jpg"></li>
<li><img alt="" src="../images/beijing/2.jpg"></li>
<li><img alt="" src="../images/beijing/3.jpg"></li>
<li><img alt="" src="../images/beijing/4.jpg"></li>
</ul>
</div>
<script>
var carousel = document.querySelector(".carousel");
var ul = carousel.querySelector("ul");
var lis = carousel.querySelectorAll("li");
//当前是第几张图片
var index = 0;
//自动轮播
setInterval(function () {
index++;
//到最后一个就回去第一个
if (index === lis.length) {
lis[index - 1].style.opacity = 0;
index = 1;
lis[index].style.opacity = 1;
}
lis[index - 1].style.opacity = 0;
lis[index].style.opacity = 1;
}, 1000);
</script>
</body>
</html>写回答
1回答
-
好帮手慕久久
2022-08-16
同学你好，代码逻辑有点问题：
当轮播图切换到最后一张后，再次轮播，会跳过第一张图，直接显示第二张图：
并且会切换两次：
调整如下：
var carousel = document.querySelector(".carousel"); var ul = carousel.querySelector("ul"); var lis = carousel.querySelectorAll("li"); //当前是第几张图片 var index = 0; //自动轮播 setInterval(function () { index++; //到最后一个就回去第一个 if (index === lis.length) { lis[index - 1].style.opacity = 0; // index = 1; index = 0 lis[index].style.opacity = 1; } else { lis[index - 1].style.opacity = 0; lis[index].style.opacity = 1; } }, 1000);祝学习愉快！
0
相似问题