初级版轮播图，实现左右按钮切换图片，下方小点切换图片，简单的自动轮播
代码：（缺点，固定图片张数和宽度高度，每次用时都需要复制，代码累赘，多处功能不完善）
Html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div id="box">
<div id="pic_box"></div>
<img id="left" src="img/left.png" alt="">
<img id="right" src="img/right.png" alt="">
<ul id="dot_box"></ul>
</div>
<script src="./js/main.js"></script>
</body>
</html>Css：
* {
margin: 0;
padding: 0;
}
#box {
margin: 50px auto;
960px;
height: 320px;
background: lightcoral;
position: relative;
overflow: hidden;
}
#pic_box {
height: 320px;
4800px;
background: lightblue;
position: absolute;
transition: all 1s;
}
#left {
position: absolute;
top: 130px;
left: 10px;
}
#right {
position: absolute;
top: 130px;
right: 10px;
}
ul {
list-style: none;
position: absolute;
bottom: 20px;
left: 400px;
}
li {
20px;
height: 20px;
list-style: none;
border-radius: 50%;
border: 3px solid lightcoral;
float: left;
margin-left: 5px;
}JS：
var pic_box, box, left, right, dot_box, dot, count = 0; //定义装图片的盒子，最外面的大盒子，左右按键，盒子下面的小点容器，及当前小点容器，计数值，记录当前显示的图片张数
var arr_img = ["a.jpeg", "b.jpeg", "c.jpeg", "d.jpeg", "e.jpeg"];
//图片路径
init();
function init() { //入口函数，获取所有元素并赋值给变量
dot_box = document.getElementById("dot_box");
pic_box = document.getElementById("pic_box");
box = document.getElementById("box");
left = document.getElementById("left");
right = document.getElementById("right");
pic_box.style.left = 0; //放图片的盒子左边相对父元素（最大的盒子）定位初始化
for (var i = 0; i < arr_img.length; i++) { //新建图片及宽高
var img = new Image();
img.src = "img/" + arr_img[i];
img.style.width = "960px";
img.style.height = "320px";
pic_box.appendChild(img);
var li = document.createElement("li"); //新建盒子下面的小点（点击切换）
dot_box.appendChild(li);
}
dot = dot_box.firstElementChild; //默认第一个小点的样式
dot.style.backgroundColor = "lightcoral";
//给盒子下面的小点和左右按钮增加监听事件
left.addEventListener("click", change_pic);
right.addEventListener("click", change_pic);
dot_box.addEventListener("click", changedot);
}
function change_pic(e) {
//左按钮
if (this === left) {
count--; //计数器减减，直到小于零时跳到最后一张
if (count < 0) {
count = arr_img.length - 1;
}
//右按钮
} else if (this === right) {
count++; //计数器加加，直到大于总图片数减一时跳到第一张
if (count > arr_img.length - 1) {
count = 0;
}
}
pic_box.style.left = -count * 960 + "px"; //单击后切换定位位置，达到水平移动
count_pic(); //每次移动后改变小点位置
}
function changedot(e) { //点击小点让计数器的值等于点击的那个小点的索引，移动图片，切换小点
for (var j = 0; j < arr_img.length; j++) {
if (dot_box.children[j] === e.target) {
count = j;
}
}
pic_box.style.left = -count * 960 + "px";
count_pic();
}
function count_pic() {
dot.style.backgroundColor = "transparent"; //前一个小点背景透明
dot = dot_box.children[count]; //将被切换的小点赋值给当前小点，使其根据计数器切换
dot.style.backgroundColor = "lightcoral";
}
function autochange() { //自动轮播，3秒切换一次
count++;
if (count > arr_img.length - 1) {
count = 0;
}
pic_box.style.left = -count * 960 + "px";
count_pic();
}
setInterval(autochange, 3000);