该文档实现的效果如下：
1. 轮播图获得焦点时，显示左右箭头，并停止轮播图自动播放
2. 实现点击左右箭头时，轮播图自动向左或向右，并且小圆点跟随运动
3. 点击小圆点时，图片切换到对应的图片
4. 自动轮播，每2s一次
代码中图片根据自己需要，新建一个images文件夹，将图片定义为1.jpg-5.jpg即可，也可添加多个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单的轮播图</title>
<style>
ul {
list-style: none;
position: absolute;
margin: 0;
padding: 0;
left: 0;
width: 1000%;
}
img {
width:400px;
height:300px;
}
.box {
width: 400px;
height: 300px;
margin: 100px auto;
padding: 0px;
border: 1px solid gray;
}
.inner {
width: 400px;
height: 300px;
background-color: pink;
overflow: hidden;
position: relative;
}
.inner li {
float: left;
}
.circle {
position: absolute;
right:150px;
bottom: 3px;
}
.circle li {
display: inline-block;
width: 10px;
height: 10px;
background-color: white;
border-radius: 50%;
text-align: center;
line-height: 8px;
cursor: pointer;
margin: 8px;
}
.circle .current {
background-color: orangered;
color: white;
}
.arrow {
position: absolute;
top: 50%;
color: white;
height: 10px;
width: 400px;
}
.arrow span:last-child{
display: none;
position: absolute;
right:10px;
cursor: pointer;
}
.arrow span:first-child{
display: none;
position: absolute;
left:10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="inner"><!--相框-->
<ul>
<li><a href="#"><img src="images/1.jpg"/></a></li>
<li><a href="#"><img src="images/2.jpg"/></a></li>
<li><a href="#"><img src="images/3.jpg"/></a></li>
<li><a href="#"><img src="images/4.jpg"/></a></li>
<li><a href="#"><img src="images/5.jpg"/></a></li>
</ul>
<div class="arrow">
<span><</span>
<span>></span>
</div>
<ol class="circle"></ol>
</div>
</div>
<script>
// 封装一个轮动函数
// 简单动画函数封装，obj目标对象 target目标位置
function animate(obj, target, callback){
// 先清除一下定时器，防止多次点击造成叠加
clearInterval(obj.timer);
// 给不同的元素指定不同的定时器，相当于给对象添加一个属性
obj.timer = setInterval(function(){
var step = (target - obj.offsetLeft)/10;
// 将步长改为整数，如果是正数就取大，如果是负数就取小
step = step > 0? Math.ceil(step): Math.floor(step);
if (obj.offsetLeft == target){
clearInterval(obj.timer);
// 回调函数添加到定时器结束之后
// if(callback){
// callback();
// }
// 简写为
callback && callback();
}else{
obj.style.left = obj.offsetLeft + step +'px';
}
}, 10)
};
//获取最外面的div
var inner=document.querySelector('.inner');
var arrow_l = document.querySelector('.arrow').children[0];
var arrow_r = document.querySelector('.arrow').children[1];
// 对arrow进行处理，当鼠标进入轮播图的时候才显示
inner.addEventListener('mouseenter', function(){
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
clearInterval(timer); // 清除定时器
timer = null;
})
inner.addEventListener('mouseleave', function(){
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
timer = setInterval(() => {
arrow_r.click();
}, 2000);
})
//获取ul
var ul=inner.querySelector('ul');
//获取相框的宽度
var imgWidth=inner.offsetWidth;
//生成circle中的小圆点
ol = inner.querySelector('.circle')
for (var i=0;i < ul.children.length;i++){
var li = document.createElement('li');
// 设置li的index属性
li.setAttribute('index', i);
// 将创建的li添加到ol中
ol.appendChild(li);
// 给第一个小圆点添加类名
ol.children[0].className = 'current';
// 绑定小圆圈的点击事件
li.addEventListener('click', function(){
// 先清除所有li的状态
for(var i=0; i < ol.children.length; i++){
ol.children[i].className = '';
}
// 给当前li添加
this.className = 'current';
// 获取当前小li的index
index = this.getAttribute('index');
num = circle = index;
// 移动图片
animate(ul, -index * imgWidth)
})
}
// 克隆一份第一个图片,插入到ul的最后, cloneNode(true)中的true表示深拷贝
ul.appendChild(ul.children[0].cloneNode(true));
// 点击右侧箭头
var num = 0;
var circle = 0;
var flag = true; // 定义一个节流阀，解决快速点击的问题
arrow_r.addEventListener('click', function(){
if(flag){
flag = false;
// 如果点击到最后一张图片那么就切换到第一张
if (num == ul.children.length - 1){
ul.style.left = 0;
num = 0;
}
num ++;
animate(ul, -num * imgWidth, function(){
flag = true;
});
// 设置小圆圈的状态
circle ++;
if(circle == ol.children.length){
circle = 0;
}
circleChange();
}
})
// 点击右侧箭头
arrow_l.addEventListener('click', function(){
if(flag){
flag = false;
// 如果点击到最后一张图片那么就切换到第一张
if (num == 0){
num = ul.children.length - 1;
ul.style.left = -num * imgWidth + 'px'; // 一定要注意这个px和num前面的负号
}
num --;
animate(ul, -num * imgWidth, function(){
flag = true;
});
// 设置小圆圈的状态
circle --;
if(circle < 0){
circle = ol.children.length - 1;
}
circleChange();
}
})
// 封装一个小圆点变化的函数
function circleChange (){
for(var i=0; i<ol.children.length;i++){
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
}
// 自动播放功能的实现
var timer = setInterval(() => {
arrow_r.click(); // 相当于点击了一个右箭头
}, 2000);
</script>
</body>
</html>
