github地址：
https://github.com/Changemcfeng/Carousel
Html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rotation chart</title>
</head>
<body>
<div id="container" class="container">
<div class="Carausel" id="Carausel">
<div class="list" id="list">
<img src="images/a5.jpg" alt="5" height="350px" width="800px" />
<img src="images/a1.jpg" alt="1" height="350px" width="800px" />
<img src="images/a2.jpg" alt="2" height="350px" width="800px" />
<img src="images/a3.jpg" alt="3" height="350px" width="800px" />
<img src="images/a4.jpg" alt="4" height="350px" width="800px" />
<img src="images/a5.jpg" alt="5" height="350px" width="800px" />
</div>
<div id="buttons" class="buttons">
<span index="1" class="on button"></span>
<span index="2" class="button"></span>
<span index="3" class="button"></span>
<span index="4" class="button"></span>
<span index="5" class="button"></span>
</div>
<div id="prev" class="lr"></div>
<div id="next" class="gr"></div>
</div>
</div>
</body>
</html>
css样式：
<style>
* {
padding: 0;
margin: 0;
}
.container {
display: flex;
justify-content: center;
}
.Carausel {
display: flex;
overflow: hidden;
width: 800px;
margin-top: 1.875rem;
}
.list {
display: flex;
width: 4800px;
height: 350px;
}
.lr {
background-image: url(images/lt.png);
transition-duration: 0.3s;
position: absolute;
background-repeat: no-repeat;
background-size: 30px 37px;
top: 190px;
width: 27px;
height: 44px;
left: 300px;
z-index: 999;
cursor: pointer;
display: none;
}
.lr:hover {
display: block;
}
.gr {
background-image: url(images/gt.png);
background-repeat: no-repeat;
transition-duration: 0.3s;
background-size: 30px 37px;
position: absolute;
top: 190px;
width: 27px;
height: 44px;
left: 1020px;
z-index: 999;
cursor: pointer;
display: none;
}
.gr:hover {
display: block;
}
.list img {
display: block;
}
.button {
width: 12px;
height: 12px;
display: inline-block;
border-radius: 100%;
background: orangered;
opacity: 1;
cursor: pointer;
margin-left: 10px;
}
.buttons {
position: absolute;
left: 626px;
top: 322px;
}
.on {
background: ghostwhite;
}
js代码如下：
<script>
var lock = true; //锁
var list = document.getElementById("list"); //图片的位移设置
var prev = document.getElementById("prev"); //后退
var next = document.getElementById("next"); //前进
var span = document.querySelectorAll("#buttons span"); //小圆点
var carausel = document.getElementById("Carausel"); //轮播图容器
var fla; //自动轮播的判断标志
var flag1; //播放下一张图的判断标志
var flag2; //播放上一张图的判断标志
var flag3 = false; //设置前进，后退按钮出现的标志
var flag4 = true;
var total = 0; //图片移动的当前位置
var number = 0; //图片的索引
flag = setInterval(pictruenext, 1000);
next.onclick = pictruenext; //下一张图
prev.onclick = pictrueprev; //上一张图
carausel.onmouseover = function() { //移入轮播图容器
//停止自动轮播
flag3 = true;
clearInterval(flag);//清除定时器
setNone();//设置当前小圆点的样式
setNone(); //显示前进，后退按钮。
}
carausel.onmouseout = function() {
flag3 = false;
flag = setInterval(pictruenext, 1500); //开始自动轮播
setNone(); //隐藏前进，后退按钮
}
for (let i = 0; i < 5; i++) {
span[i].onclick = function() { //设置当前小圆点的样式
reset(); //重置小圆点样式
span[i].className = "on button"; //设置当前小圆点的样式
buttonClick(i); //点击小圆点，跳到相应的图
}
}
function setNone() { //设置前进，后退按钮
if (flag3 == true) {
prev.style = "display:block";
next.style = "display:block";
} else {
prev.style = "display:none";
next.style = "display:none";
}
}
function reset() { //重置小圆点样式
for (let i = 0; i < 5; i++) {
span[i].className = "button";
}
}
function setClassName() { //设置当前小圆点样式
reset();
span[number].className = "on button";
}
function pictruenext() { //下一张图
if (lock == true) {
flag1 = setInterval(nextInterval, 5); //下一张图的过渡动画。后判断溢出
}
}
function pictrueprev() { //上一张图
if (lock == true) {
overflow2(); //先判断溢出
flag2 = setInterval(prevInterval, 5);
}
}
function overflow1() { //前进时后判断是否number溢出
let temp = number;
if (temp >= 4) {
number = 0;
total = 0;
} else {
number += 1;
}
}
function overflow2() { //后退时先判断是否number溢出
let temp = number;
temp -= 1;
if (temp < 0) {
number = 4;
total = 4000;
} else {
number -= 1;
}
}
function buttonClick(index) { //点击小圆点，跳到相应的图
number = index;
total = index * 800;
setValue();
clearInterval(flag1);
clearInterval(flag2);
lock = true;
}
function stopInterval1() { //停止前进动画
total = total - 4;
overflow1();
clearInterval(flag1);
setClassName();
lock = true;
}
function stopInterval2() { //停止后退动画
total = total - 4;
clearInterval(flag2);
setClassName();
lock = true;
}
function nextInterval() { //下一张图的调用的函数
lock = false;
let step = 4;
total += step;
if (total > ((number + 1) * 800)) {
stopInterval1();
return;
} else {
setValue();
}
}
function prevInterval() { //上一张图的调用的函数
lock = false;
let step = 4;
total -= step;
if (total < ((number) * 800)) {
stopInterval2();
total -= step;
return;
} else {
setValue();
}
}
function setValue() { //设置图片的偏移量
let tt = -1 * total + "px";
list.style.transform = "translateX(" + tt + ")";
}
收获（源生js）：
第一步：先把html+css 框架搭好。
第二部：js中定义相应变量。
第三部:函数。
1：先写前进函数
写前进函数遇到坑：就是在动画还没结束的时候快速点击前进，会出现图片位移不对。解决办法 ：创建一个变量var lock=ture；进入动画时lock=flase，进行锁住。结束时再解开。记得溢出处理。
2：后退函数：
后退函数与前进函数差距还是有点大。先是溢出判断，在进行动画，而前进函数则是先进行动画再进行溢出判断，并且溢出判断条件也不相同。
3：小圆变色事件：
每次前进一次，number+1；相当于图片的索引值加一，之后先清除span的class，再将新的class赋给下一个span；
4：点击小圆点事件：
通过number全局变量，进行相应的设置。
5：周期性的调用前进函数；
使用setInterval调用(当如果使用了window.onload()函数中调用前进动画函数，会有bug。)
6：小小的彩蛋：
background-size 用来调整背景图像的尺寸大小（设置了背景图片，未出现图片时，先看页面是否加载，再看这个东西）。
onmouseover 事件（包括其子类）换句话说移动到其子类不会触发此事件，而onmouseleave （不包括其子类) 也就是移动到其子类会触发该事件。
最后也希望大家能给我提点宝贵的意见
349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
