用三种方式实现轮播图
2023-06-30 10:26
轮播图的实现原理
顾名思义，轮播图就是实现图片的轮换播放效果。先显示一张图片，一定的时间，让这张图片消失，下一张图片显示。让它们实现跟淘宝首页一样的广告轮播效果。
首先是前端html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>轮播图</title>
<style>
* {
margin: 0;
padding: 0;
text-decoration: none;
}
.top {
width: 700px;
margin: 0 auto;
height: 500px;
border: 1px solid;
background-repeat: no-repeat;
}
img {
width: 700px;
height: 500px;
}
.inner1,
.inner2,
.inner3,
.inner4 {
position: absolute;
margin-top: 0;
display: block;
}
.ul {
width: 150px;
height: 15px;
font-size: 10px;
line-height: 15px;
text-align: center;
margin: 0 auto;
}
.first {
display: inline-block;
width: 15px;
height: 15px;
border: 1px solid;
background-color: lightblue;
border-radius: 50%;
margin-right: 15px;
}
.first:hover {
background-color: red;
}
</style>
</head>
<body>
<div class="top">
<div class="inner1">
<img src="img/1.jpg" />
</div>
<div class="inner2">
<img src="img/2.jpg" />
</div>
<div class="inner3">
<img src="img/3.jpg" />
</div>
<div class="inner4">
<img src="img/4.jpg" />
</div>
</div>
<div class="ul">
<ul>
<li class="first one">1</li>
<li class="first two">2</li>
<li class="first three">3</li>
<li class="first four">4</li>
</ul>
</div>
</body>
</html>
图片可以设置成自己想要的图片，只需要在img src后换成自己本地的图片就行。
js代码
使用display实现轮播
<script type="text/javascript">
//获取img
var img = document.querySelectorAll("img"); //通过选择器，获取img
var li = document.querySelectorAll("li");
var div = document.querySelectorAll(".top div");
// console.log(img);
var index = 0; //定义一个初始值为0的变量
function scrol() {
//使用display实现
//隐藏
for (var i = 0; i < img.length; i++) {
//设置让三个隐藏，一个显示
img[i].style.display = "none"; //把所有的img隐藏
li[i].style.backgroundColor = ""; //分页颜色全都不显示
}
img[index].style.display = "block"; //让一个显示
li[index].style.backgroundColor = "red"; //一个分页显示颜色
index++; //自增
if (index == div.length) {
index = 0;
}
}
var timer = setInterval(scrol, 500); //设置定时器
function mOver(index) {
//设置鼠标移动在分页上的函数
clearInterval(timer); //清除定时器
for (var i = 0; i < div.length; i++) {
//循环实现分页颜色的变化
div[i].style.zIndex = "1"; //让所有图片隐藏
li[i].style.backgroundColor = ""; //分页颜色失效
}
div[index].style.zIndex = "9"; //当前选中分页显示
}
function mOut() {
//鼠标移出让它继续轮播
timer = setInterval(scrol, 500);
}
for (var i = 0; i < div.length; i++) {
li[i].onmouseover = function () {
mOver(i);
};
li[i].onmouseout = function () {
mOut(i);
};
}
</script>
使用zIndex实现轮播
zIndex我的理解就是屏幕离人的距离，就是z轴。值越大，离人的距离越近，也就是首先显示出来
//使用zIndex实现
for (var i = 0; i < div.length; i++) {
div[i].style.zIndex = "1";
li[i].style.backgroundColor = "";
}
div[index].style.zIndex = "9";
li[index].style.backgroundColor = "red";
index++;
if (index == div.length) {
index = 0;
}
使用透明度实现轮播
透明度是0-1之间，0是透明，1是不透明，也就是显示出来
//使用透明度实现
for (var i = 0; i < img.length; i++) {
img[i].style.opacity = "0";
li[i].style.backgroundColor = "";
}
img[index].style.opacity = "1";
li[index].style.backgroundColor = "red";
index++;
if (index == img.length) {
index = 0;
}
总结
轮播图，刚才是我做的时候首先想到的是使用for循环实现轮播图，做的过程中发现，for循环实在是太快，肉眼根本捕捉不到。就想到使用定时器，每隔多长时间调用这个函数，就能实现轮播的效果。我的总体思路就是先让其他隐藏，让一个显示，然后定时器每调用一个就能实现一个的显示其他的隐藏。