版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
js 轮播图（透明度）
用透明度的方式来实现轮播图
先说下思路，我们首先应该考虑下页面的结构。
第一，我们在做网站的时候，不可能一个页面都是轮播图，所以我们首先需要一个大的盒子，来把轮播图包起来，这里我用的是div
第二，因为使用透明度做的，所以轮播图的切换方式也是透明度，也就是说一个隐藏，一个显示，那么也就意味着，这些用来做轮播图的图片是在同一个位置上，一个压着一个的。这个效果可以用position：absolute来实现，这些图片需要一个共同的祖先来设置position：relative，所以我用的是ul>li>a>img
第三，怎么样让图片逐个显示，首先我们可以先将图片全部隐藏，然后在逐个显示，需要注意层级的问题，这个问题可以用z-index解决
最后，剩下的小点和前进、后退，可以直接用定位，定到上方。
然后，我们来考虑下思路
我们需要创建一个选中样式，选中样式的作用就是，将图片显示出来。
然后在js中要做的就是首先定义一个函数，这个函数的功能是，我们往里面传递图片的索引，函数根据索引，找到对应的元素，将选中样式赋值给他
其他的效果，就是参数的不同了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
div {
width: 500px;
height: 313px;
border: 1px solid black;
position: relative;
}
.carousel li {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity .3s;//切换图片时的过度效果
}
.carousel li a img {
width: 500px;
height: 313px;
}
.carousel .selection {//显示的图片需要的类
opacity: 1;
z-index: 10;
}
.prev,
.next {//左右箭头的样式
width: 50px;
height: 50px;
font-size: 30px;
text-align: center;
line-height: 50px;
background: white;
opacity: .3;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 101;
cursor: pointer;
user-select: none;
}
.prev:hover,
.next:hover {
opacity: .8;
}
.prev {
left: 20px;
}
.next {
right: 20px
}
.circle {
position: absolute;
height: 8px;
left: 50%;
transform: translateX(-50%);
z-index: 200;
bottom: 20px;
}
.circle li {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(180, 180, 180, .3);
border: 1px solid transparent;
float: left;
margin-left: 10px;
cursor: pointer;
}
.circle .current {//选中小点的样式
background: rgba(180, 180, 180, .8);
border: 1px solid rgb(50, 50, 50);
}
</style>
<body>
<div>
<ul class="carousel">
<li class="selection"><a href="#1"><img src="1.jpg" alt=""></a></li>
<li><a href="#2"><img src="2.jpg" alt=""></a></li>
<li><a href="#3"><img src="3.jpg" alt=""></a></li>
<li><a href="#4"><img src="4.jpg" alt=""></a></li>
<li><a href="#5"><img src="5.jpg" alt=""></a></li>
</ul>
<div class="prev">< </div> //左箭头
<div class="next">></div>//右箭头
<ul class="circle">//全部的小点
<li class="current"></li>//小点
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var currentIndex = 0;//当前图片的索引，我希望从0开始
var id;
var len = document.querySelector('.carousel').childElementCount;//得到ul下面li的个数
function carousel(index) {//建一个函数，用来提供一个索引然后切换到索引对应的图片
if (currentIndex === len) //判断一下，当前图片索引是否等于li的个数，因为当前索引是从0开始的，所以总数的值是没有的
currentIndex = index = 0
}
if (currentIndex < 0) {
currentIndex = index = 4
}
document.querySelector('.current').className = '';//将页面上有选中样式的小点的样式清空
document.querySelector('.circle li:nth-child(' + (index + 1) + ')').className = 'current'//根据索引来控制那个小点是显示状态
document.querySelector('.selection').className = '';//将页面上有选中样式的图片的样式清空
document.querySelector('.carousel li:nth-child(' + (index + 1) + ')').className = 'selection'//根据索引来控制那张图片显示
}
function prev() {//后退函数
currentIndex--;//当前索引减1
carousel(currentIndex) //调用carousel函数
}
function next() {//前进函数
currentIndex++;//当前索引加1
carousel(currentIndex) //调用carousel函数
}
var lis = document.querySelectorAll('.circle li');//得到页面上的所有小点
for (var i = 0; i < lis.length; i++) {//for循环遍历
lis[i].index = i;//将i值先保存一下
lis[i].onclick = function () {//
currentIndex = this.index
carousel(currentIndex);
}
}
function auto() {//自动切换
id = setInterval(next, 1000)//间隔函数，每一秒调用一次前进函数
}
function stop() {
clearInterval(id)
}
auto();
document.querySelector('.prev').onclick = prev//后退按钮的点击事件
document.querySelector('.next').onclick = next//前进按钮的点击事件
document.querySelector('div').onmouseover = stop//div的鼠标移入事件
document.querySelector('div').onmouseout = auto//div的鼠标移出事件
</script>
</body>
</html>
