demo展示地址：calmsteady.github.io/RotationCha…
之前实现轮播图主要是利用原生js写个动画加计时器实现，非常的麻烦且bug多。本篇主要利用css3：transition实现轮播图效果，简便美观无bug。话不多说，直接上代码。（demo加载的比较慢，因为图片体积较大。。。）
html和css部分：
<!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>轮播图</title>
<link rel="stylesheet" href="index.css">
<script src="index.js"></script>
</head>
<body>
<div class="main">
<ul class="container">
<li class="banner">
<a href=""><img src="1.jpg" alt="" style="width: 1000px;height: 500px;"></a>
</li>
<li class="banner">
<a href=""><img src="2.jpg" alt="" style="width: 1000px;height: 500px;"></a>
</li>
<li class="banner">
<a href=""><img src="3.jpg" alt="" style="width: 1000px;height: 500px;"></a>
</li>
<li class="banner">
<a href=""><img src="4.jpg" alt="" style="width: 1000px;height: 500px;"></a>
</li>
<li class="banner">
<a href=""><img src="5.jpg" alt="" style="width: 1000px;height: 500px;"></a>
</li>
<div class="tabs">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<i class="next"></i>
<i class="prev"></i>
</ul>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.main {
margin: 0 auto;
width: 1000px;
height: 500px;
}
.main .container {
width: 1000px;
height: 500px;
margin: 30px auto;
position: relative;
}
.main .container .banner {
list-style: none;
display: block;
position: absolute;
top: 0;
opacity: 0;
transition: opacity 2s;
}
.main .container .banner a {
display: block;
width: 100%;
height: 100%;
}
.main .container .tabs {
position: absolute;
bottom: 10px;
left: 85%;
}
.main .container .tabs span {
cursor: pointer;
display: inline-block;
box-sizing: border-box;
width: 12px;
height: 12px;
margin: 1px;
border: 1px solid royalblue;
border-radius: 50%;
}
.main .container .tabs span:hover {
background-color: lightgrey;
}
.main .container .tabs .current {
background-color: lightgrey;
}
.main .container .next {
cursor: pointer;
width: 41px;
height: 69px;
display: block;
position: absolute;
right: 10px;
top: 50%;
background-image: url('./icon-slides.png');
background-position: 41px;
}
.main .container .prev {
cursor: pointer;
width: 41px;
height: 69px;
display: block;
position: absolute;
left: 10px;
top: 50%;
background-image: url('./icon-slides.png');
background-position: 82px;
}
.main .container .next:hover,
.main .container .prev:hover {
background-color: lightslategrey;
}
首先让每张图的透明度opacity为0.且设置transition： opacity 2s ，不了解transition的建议先花2分钟学习一下这个属性，这边不在阐述。
重点：js部分
window.addEventListener('load', function() {
// 先获取界面中所有相关的元素.
var container = this.document.querySelector('.container');
var banners = document.querySelectorAll('.banner');
var spans = document.querySelector('.tabs').children;
var next = document.querySelector('.next');
var prev = document.querySelector('.prev');
banners[0].style.opacity = 1; // 先让第一张banner显示出来.
spans[0].className = 'current'; //先让第一个小圆点变颜色.
//给小圆点添加点击事件,出现相应的banner;
for (var i = 0; i < spans.length; i++) {
spans[i].index = i; //给每一份span添加代表自是第几个的属性。
spans[i].addEventListener('click', function() {
for (var j = 0; j < spans.length; j++) { //排他思想
spans[j].className = '';
banners[j].style.opacity = 0;
}
this.className = 'current'; //当前事件监听器绑定哪个对象，this就指向这个对象。
banners[this.index].style.opacity = '1'; //
})
}
//给右侧按钮添加点击事件；
next.addEventListener('click', function() {
for (var j = 0; j < spans.length; j++) {
if (spans[j].className == "current") {
// 先找出当前在哪个span，找到了之后 令当前的banner消失，小圆圈变回无色，然后给下一个小圆圈上色，让下一个banner出现。
spans[j].className = "";
banners[j].style.opacity = "0";
j++;
if (j > 4) { //如果正好是最后一个banner，则下一个banner是第一个。j=0；
j = 0;
}
spans[j].className = "current";
banners[j].style.opacity = "1";
}
}
})
//给右侧按钮添加点击事件；
prev.addEventListener('click', function() {
for (var j = 0; j < spans.length; j++) {
if (spans[j].className == "current") {
// 先找出当前在哪个spans，找到了之后 令当前的banner消失，小圆圈变回无色，然后给下一个小圆圈上色，让下一个banner出现。
spans[j].className = "";
banners[j].style.opacity = "0";
j--;
if (j < 0) { //如果正好是最第一个banner，则下一个banner是最后一个。j=4；
j = 4;
}
spans[j].className = "current";
banners[j].style.opacity = "1";
}
}
})
//设置定时器，window载入时出发。
var timer = setInterval(function() {
next.click();
}, 3000)
//设置鼠标移入时定时器消失
container.addEventListener('mouseenter', function() { //不要用mouseout 和mouseover 会冒泡 一直触发事件 乱套了。
clearInterval(timer);
timer = null;
})
//设置鼠标移出时定时器消失。
container.addEventListener('mouseleave', function() {
timer = setInterval(function() {
next.click();
}, 3000)
})
})
具体的思路都注释在代码部分了，在理解算法的基础上就可以轻易的写出这个demo，多看多思考一定可以理解。如果对您有帮助的话记得点个赞谢谢。
