## 看了不会算我输
轮播图效果如下：
**轮播图实现方式：经过定位的方式，改变left的值，形成轮播图的效果（亦能够是从上到下翻滚的，改变top或（bottom））**
必须准备的素材：
1、轮播照片任意
2、上下移动箭头
轮播图的制作办法：
## 第1步创建三个文件
.html文件， .css文件, .js文件
在创建一个img文件夹用来放照片
我这儿的文件名字：轮播图.html 轮播图.css 轮播图.js（文件名最好是英文）
## 第二步：经过html把框架搭好：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="轮播图.css">
<script src="./轮播图.js" defer></script>
<style>
.imgdiv ul li img{
/* 照片体积 */
width: 1024px;
height:420px;
}
</style>
</head>
<body>
<div class="imgdiv" style="width: 1024px; height: 420px;">
<ul style="left: 0;">
<li><img src="./img/1.jpg" alt=""></li>
<li><img src="./img/2.jpg" alt=""></li>
<li><img src="./img/3.jpg" alt=""></li>
<li><img src="./img/4.jpg" alt=""></li>
</ul>
<span class="lf"><img src="./img/左箭头.png" alt=""></span>
<span class="rf"><img src="./img/右箭头.png" alt=""></span>
</div>
</body>
</html> 重视的点：1、script标签引外边js时，加上defer（加载完成html后，在加载js），避免获取不到元素的状况。
2、js获取外边css样式修改的时候，亦便是无在html文件里的样式，有可能js获取不到，因此上面代码中必须改变的left值，还有照片还有外边盒子的宽度，我都写在了html里，亦方便了倘若照片体积改变时，**只必须修改html文档就好，css和js代码都不必须动**
上面代码运行结果：我这儿准备了四张照片（读者想用几张都能够）
| 
发表于 2024-6-29 14:17:49
