实现效果：
1、自动循环播放下一张
2、鼠标悬停，移出继续播放
3、鼠标点击向右按钮，跳到下一张
4、鼠标点击向左按钮，跳到上一张
5、保证图片的过渡效果完整呈现后，才能跳到下一张
实现思路：
1、图片列表使用绝对定位，堆叠在相同位置
2、只有第一张透明度opacity为1，其他为0
3、定义变量currentPosition，记录当前图片是第几张，默认为0第一张
4、获取li列表项数组，切换时 liArr[currentPosition] 透明度变0，liArr[currentPosition+1] 透明度变1
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>呼吸轮播图</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 标题*/
h1 {
text-align: center; /*居中显示*/
}
.carousel {
width: 650px;
height: 360px;
border: 1px solid #000;
margin: 50px auto;
position: relative;
}
.carousel ul {
/* 消除列表默认样式 */
list-style: none;
}
.carousel #list img {
width: 650px;
}
.carousel #list li {
/* 所有图片都使用绝对定位，层叠在同一位置 */
position: absolute;
top: 0;
left: 0;
/* 透明度都是0 */
opacity: 0;
/* 透明效果过渡 */
transition: opacity 1s ease 0s;
}
/* 只有第一张透明度是1 */
.carousel #list li:first-child {
opacity: 1;
}
/* 上一张/下一张控制按钮 */
.carousel>a {
position: absolute;
width: 30px;
height: 50px;
/* 垂直居中，距顶部一半的父元素盒子宽度，再向上移动自身的一半 */
top: 50%;
margin-top: -25px;
background-color: rgba(163, 166, 167, 0.5);
}
.carousel>a>img {
margin-left: -8px;
}
.carousel .leftbtn {
left: 20px;
}
.carousel .rightbtn {
right: 20px;
}
/* 底部定位圆点list */
.carousel #location_list {
width: 120px;
position: absolute;
top: 350px;
left: 270px;
}
.carousel #location_list li {
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
margin: 5px;
border: 1px solid white;
}
/* 圆点被激活时的样式，动态为圆点增加class */
.carousel #location_list li.active {
background-color: bisque;
}
</style>
</head>
<body>
<h1>渐出渐入式轮播图</h1>
<div class="carousel">
<!--图片列表 -->
<ul id="list">
<li><img src="images/number/1.jpg" alt="" /></li>
<li><img src="images/number/2.jpg" alt="" /></li>
<li><img src="images/number/3.jpg" alt="" /></li>
<li><img src="images/number/4.jpg" alt="" /></li>
<li><img src="images/number/5.jpg" alt="" /></li>
</ul>
<!-- 左右按钮 -->
<a href="javascript:;" class="leftbtn" ><img src="./images/lunbo/chevron-left.png" alt="" srcset=""></a>
<a href="javascript:;" class="rightbtn"><img src="./images/lunbo/chevron-right.png" alt="" srcset=""></a>
<!-- 圆点列表 -->
<ul id="location_list">
<!-- 默认激活第一个 -->
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var carousel = document.querySelector(".carousel");
// 获取图片列表ul
var olist = document.getElementById("list");
var liArr = document.querySelectorAll("#list li");
// 获取定位数组
var location_list = document.querySelectorAll('#location_list>li');
// 向左按钮
var leftbtn = document.querySelector('.leftbtn');
// 向右按钮
var rightbtn = document.querySelector('.rightbtn');
// 当前图片定位
var currentPosition = 0;
// 定义全局定时器
var timer = null;
// 使用islock变量，保证过渡效果完成后再执行获取下一张的动作
var islock = false;
function move(){
// 定义一个定时器，每隔2s模拟点击右键的动作
timer = setInterval(function(){
rightbtn.click();
},2000);
}
// 页面加载后自动执行move函数
move();
// 鼠标移入，清除定时器
carousel.onmouseenter = function(){
clearInterval(timer);
}
// 鼠标移出，调用自动播放
carousel.onmouseleave = function(){
move();
}
// 下一张
rightbtn.onclick = function(){
// 如果当前过渡效果还未执行完，先不执行获取下一张的动作
if(islock){
return;}
// 上锁，保证过渡效果完成
islock = true;
// 设置当前图片透明度为 0，透明
liArr[currentPosition].style.opacity = 0;
location_list[currentPosition].className = "none";
if(currentPosition == 4){
currentPosition = -1;
}
// 设置下一张透明度为 1，不透明
liArr[currentPosition+1].style.opacity = 1;
location_list[currentPosition+1].className = "active";
currentPosition++;
// 1s的过渡效果完成后，解锁，可以执行获取下一张的动作
setTimeout(function(){
islock = false;
},1000)
};
// 上一张
leftbtn.onclick = function(){
if(islock){
return;}
islock = true;
liArr[currentPosition].style.opacity = 0;
location_list[currentPosition].className = "none";
if(currentPosition == 0){
currentPosition = 5;
}
// 设置上一张透明度为 1，不透明
liArr[currentPosition-1].style.opacity = 1;
location_list[currentPosition-1].className = "active";
currentPosition--;
setTimeout(function(){
islock = false;
},1000)
};
</script>
</body>
</html>