原生js写简单轮播图方式2－淡入淡出
之前写了从左向右滑动的轮播图，发现图片从最后一张滑到第一张效果不太好，于是又写了淡入淡出效果的轮播图，主要是利用CSS3的特性transition。
原理
将图片叠加在一起，每次只有显示的图片透明度为1，其余的透明度都设置为0。
点击查看效果
HTML部分
nav为总容器，第一个ul列表#index为小圆点列表，鼠标覆盖哪个小圆点就显现第几张图片，on是一个给小圆点添加背景颜色属性的类；第二个ul列表#img为图片列表，opa-on是给图片设置透明度为1的类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Carousel Figure</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--淡入淡出-->
<nav>
<ul id="index">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul id="img">
<li class="opa-on"><img src="../images/img1.jpg" alt="img1"></li>
<li><img src="../images/img2.jpg" alt="img2"></li>
<li><img src="../images/img3.jpg" alt="img3"></li>
<li><img src="../images/img4.jpg" alt="img4"></li>
<li><img src="../images/img5.jpg" alt="img5"></li>
</ul>
</nav>
<script src="script.js"></script>
</body>
</html>
CSS部分
这里需要注意nav和ul#img设置的宽度均为720px，即一张图片的宽度。而且必须设置#img li中的position:absolute的设置，这个样式让图片均叠加在一起，图片之间没有先后顺序。如果position设置为relative，会因为li出现的先后关系只显示第一张图片，不管这张图片是显示还是隐藏，后面的图片会一直被第一张图片覆盖。
css3中的transition
transition是css3的样式， 它允许css的属性值在一定时间内平滑的过渡。
语法是这样的：transition: property duration timing-function delay
property：是css的属性值，比如opacity、border-radius等，也可以是all，表示所有的css属性。
duration：表示过渡的时间。
timing-function：表示执行动画的函数。
delay：表示执行动画的延迟时间。
transition: opacity 1s ease-in;表示opacity在1s内以ease-in的函数实现过渡效果。
*{
margin:0;
padding:0;
}
nav{
width: 720px;
height: 405px;
margin:20px auto;
overflow: hidden;
position: relative;
}
#index{
position: absolute;
left:320px;
bottom: 20px;
}
#index li{
width:8px;
height: 8px;
border: solid 1px gray;
border-radius: 100%;
background-color: #eee;
display: inline-block;
}
#img{
width: 720px;
height: 405px;
}
#img li{
width: 720px;
height: 405px;
position: absolute;/*必须设置为absolute，否则第一个li会把后面的都覆盖*/
z-index: -1;
opacity: 0;
transition: opacity 1s ease-in;
}
#index .on{
background-color: black;
}
#img .opa-on{
opacity: 1;
}
JavaScript部分
移动函数
图片移动的函数和小圆点移动的函数是差不多的，只不过是类的区别，一个是on，另一个是opa-on。先清除之前的样式，然后在当前图片或小圆点的li上动态添加样式。
function moveImg(list,index) {
for(var i=0;i<list.length;i++){
if(list[i].className=='opa-on'){//清除li的透明度样式
list[i].className='';
}
}
list[index].className='opa-on';
}
function moveIndex(list,num){//移动小圆圈
for(var i=0;i<list.length;i++){
if(list[i].className=='on'){//清除li的背景样式
list[i].className='';
}
}
list[num].className='on';
}
自动播放
这个基本上和从左到右滑动的轮播图效果一样，就不过多描述了。
var imgList=document.getElementById('img').getElementsByTagName('li');
var list=document.getElementById('index').getElementsByTagName('li');
var index=0;
var timer;
for(var i=0;i<list.length;i++){//鼠标覆盖上哪个小圆圈，图片就移动到哪个小圆圈，并停止
list[i].index=i;
list[i].onmouseover= function () {
var clickIndex=parseInt(this.index);
index=clickIndex;
moveImg(imgList,index);
moveIndex(list,index);
clearInterval(timer);
};
list[i].onmouseout= function () {//移开后继续轮播
play();
};
}
var nextMove=function(){
index+=1;
if(index>=5){
index=0
}
moveImg(imgList,index);
moveIndex(list,index);
};
var play=function(){
timer=setInterval(function(){
nextMove();
},3000);
};
play();
总结
淡入淡出的轮播图效果还是比较简单的，只要弄清楚css3特性中的过渡效果就比较水到渠成了。
