实现一个简单的图片轮播效果

学习笔记

思路

这里就说一下我的思路吧，我们可以先将所有图片的不透明度设置为0，也就是全透明，不可见（也不一定靠设置透明度来实现图片不可见，也可以直接设置元素不可见），使用下标的方式来控制图片是否可见，指定下标的图片的不透明度设置为100，也就是图片可见，这样就实现了显示一张图片的效果，然后我们再用定时器循环改变这个下标，这样就实现了在特定间隔内显示不同图片的效果，也就是图片轮播。

效果

在这里插入图片描述

点击按钮切换图片的思路也是通过改变下标的方式来控制显示的图片
在这里插入图片描述

代码部分

网页部分

<body><div id="box">
<!--        轮播图片--><ul id="transform"><li><img src="1.jpg" alt="this is a picture"></li><li><img src="2.jpg" alt="this is a picture"></li><li><img src="4.jpg" alt="this is a picture"></li></ul><ul id="point"><li></li><li></li><li></li></ul></div><div id="left"><p><</p></div><div id="right"><p>></p></div>
</body>

css部分

<style>* {margin: 0;padding: 0;}/*设置图片大小*/img {width: 700px;height: 500px;cursor: pointer;}#transform {position: absolute;top: 50px;left: 27%;list-style: none;}/*设置轮播图片样式*/#transform li {position: absolute;opacity: 100;}#point {position: absolute;top: 600px;left: 45%;display: flex;list-style: none;}/*小点样式*/#point li {width: 20px;height: 20px;background-color: aqua;border-radius: 50%;margin-left: 20px;cursor: pointer;}/*    左右切换按钮样式*/#left {position: absolute;top: 300px;left: 15%;font-size: 70px;font-weight: bold;color: #00000070;cursor: pointer;}#right {position: absolute;top: 300px;left: 80%;font-size: 70px;font-weight: bold;color: #00000070;cursor: pointer;}</style>

js部分

<script type="text/javascript">
<!--    自动执行定时器函数 图片自动轮播-->window.onload = automatic;var images = document.getElementById("transform").children;var points = document.getElementById("point").children;var interval;var leftButton = document.getElementById("left");var rightButton = document.getElementById("right");//设置开始图片下标 从第一张图片开始var index = 0;//循环设置元素下标for (var i = 0;i < images.length;i++){images[i].index = i;points[i].index = i;//添加点击小点切换图片事件points[i].onclick = appoint;images[i].onmouseover = function (){clearInterval(interval)};images[i].onmouseleave = function (){automatic()};}function appoint(){var apo = this.index;//循环设置li不透明度为0 也就是不可见for (var i = 0;i < images.length;i++){images[i].style.opacity = "0";}images[apo].style.opacity = "100";}//自动切换图片函数function automatic(){interval = setInterval(function (){//循环设置li不透明度为0 也就是不可见for (var i = 0;i < images.length;i++){images[i].style.opacity = "0";}//然后设置指定下标的li的不透明度为100 实现了显示指定下标的图片，而不显示其他图片images[index].style.opacity = "100";//下标自动增长index++;//下标如果超出范围，将下标重置为0if (index == images.length){index = 0;}},2000);}//为左右切换图片按钮添加事件leftButton.onclick = previous;//鼠标移动到 上一张 按钮 停止定时器leftButton.onmouseover = function (){clearInterval(interval)};//鼠标离开 上一张 按钮 开始定时器leftButton.onmouseleave = function (){automatic()};rightButton.onclick = next;//鼠标移动到 下一张 按钮 停止定时器rightButton.onmouseover = function (){clearInterval(interval)};//鼠标离开 下一张 按钮 开始定时器rightButton.onmouseleave = function (){automatic()};//切换下一张图片函数function next(){index = index + 1;//如果下标超出范围 将下标赋值为0if (index == images.length){index = 0;}//循环设置li不透明度为0 也就是不可见for (var i = 0;i < images.length;i++){images[i].style.opacity = "0";}//将下一张图片设置为可见images[index].style.opacity = "100";}//切换上一张图片function previous(){index = index - 1;//如果下标超出范围 将下标设置为 图片数量-1if (index == -1){index = images.length -1;}//循环设置li不透明度为0 也就是不可见for (var i = 0;i < images.length;i++){images[i].style.opacity = "0";}//将上一张图片设置为可见images[index].style.opacity = "100";}</script>

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}/*设置图片大小*/img {width: 700px;height: 500px;cursor: pointer;}#transform {position: absolute;top: 50px;left: 27%;list-style: none;}/*设置轮播图片样式*/#transform li {position: absolute;opacity: 100;}#point {position: absolute;top: 600px;left: 45%;display: flex;list-style: none;}/*小点样式*/#point li {width: 20px;height: 20px;background-color: aqua;border-radius: 50%;margin-left: 20px;cursor: pointer;}/*    左右切换按钮样式*/#left {position: absolute;top: 300px;left: 15%;font-size: 70px;font-weight: bold;color: #00000070;cursor: pointer;}#right {position: absolute;top: 300px;left: 80%;font-size: 70px;font-weight: bold;color: #00000070;cursor: pointer;}</style>
</head>
<body><div id="box">
<!--        轮播图片--><ul id="transform"><li><img src="1.jpg" alt="this is a picture"></li><li><img src="2.jpg" alt="this is a picture"></li><li><img src="4.jpg" alt="this is a picture"></li></ul><ul id="point"><li></li><li></li><li></li></ul></div><div id="left"><p><</p></div><div id="right"><p>></p></div>
</body><script type="text/javascript">
<!--    自动执行定时器函数 图片自动轮播-->window.onload = automatic;var images = document.getElementById("transform").children;var points = document.getElementById("point").children;var interval;var leftButton = document.getElementById("left");var rightButton = document.getElementById("right");//设置开始图片下标 从第一张图片开始var index = 0;//循环设置元素下标for (var i = 0;i < images.length;i++){images[i].index = i;points[i].index = i;//添加点击小点切换图片事件points[i].onclick = appoint;images[i].onmouseover = function (){clearInterval(interval)};images[i].onmouseleave = function (){automatic()};}function appoint(){var apo = this.index;//循环设置li不透明度为0 也就是不可见for (var i = 0;i < images.length;i++){images[i].style.opacity = "0";}images[apo].style.opacity = "100";}//自动切换图片函数function automatic(){interval = setInterval(function (){//循环设置li不透明度为0 也就是不可见for (var i = 0;i < images.length;i++){images[i].style.opacity = "0";}//然后设置指定下标的li的不透明度为100 实现了显示指定下标的图片，而不显示其他图片images[index].style.opacity = "100";//下标自动增长index++;//下标如果超出范围，将下标重置为0if (index == images.length){index = 0;}},2000);}//为左右切换图片按钮添加事件leftButton.onclick = previous;//鼠标移动到 上一张 按钮 停止定时器leftButton.onmouseover = function (){clearInterval(interval)};//鼠标离开 上一张 按钮 开始定时器leftButton.onmouseleave = function (){automatic()};rightButton.onclick = next;//鼠标移动到 下一张 按钮 停止定时器rightButton.onmouseover = function (){clearInterval(interval)};//鼠标离开 下一张 按钮 开始定时器rightButton.onmouseleave = function (){automatic()};//切换下一张图片函数function next(){index = index + 1;//如果下标超出范围 将下标赋值为0if (index == images.length){index = 0;}//循环设置li不透明度为0 也就是不可见for (var i = 0;i < images.length;i++){images[i].style.opacity = "0";}//将下一张图片设置为可见images[index].style.opacity = "100";}//切换上一张图片function previous(){index = index - 1;//如果下标超出范围 将下标设置为 图片数量-1if (index == -1){index = images.length -1;}//循环设置li不透明度为0 也就是不可见for (var i = 0;i < images.length;i++){images[i].style.opacity = "0";}//将上一张图片设置为可见images[index].style.opacity = "100";}</script>
</html>