用transition以及opacity实现轮播图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>透明轮播图</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style:none;}
.slide{width: 100%;height: 600px;position:relative;}
.viewbox li{ float: left; width: 100%;height: 600px;position: absolute;left:0;transition:.5s; }
.viewbox li img{width: 100%;height: 100%;}
.arrow p{position: absolute; width: 50px; height: 130px; line-height: 130px;font-size: 60px;font-weight:bold;color:#fff;background: rgba(0,0,0,0.5); text-align:center;top:50%; margin-top:-65px;cursor:pointer;}
.arrow .next{right:0;}
.dots li{ width: 12px; height: 12px; background: deepskyblue; border-radius:50%;margin:0 5px;float: left;border:1px solid deepskyblue;transition:0.3s;cursor:pointer;
}
.dots{ position: absolute;bottom:30px;width:200px; height:20px;left:50%; margin-left:-50px; }
.dots li.active{background:#fff; }
</style>
</head>
<body>
<div class="slide">
<ul class="viewbox">
<li><img src="../6选项卡/img/01.jpg" alt="" /></li>
<li><img src="../6选项卡/img/02.jpg" alt="" /></li>
<li><img src="../6选项卡/img/03.jpg" alt="" /></li>
<li><img src="../6选项卡/img/04.jpg" alt="" /></li>
<li><img src="../6选项卡/img/05.jpg" alt="" /></li>
</ul>
<div class="arrow">
<p class="prev"><</p>
<p class="next">></p>
</div>
<ul class="dots">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script type="text/javascript">
var viewbox=document.getElementsByClassName("viewbox")[0]
var img=viewbox.getElementsByTagName("li")
var prev=document.getElementsByClassName("prev")[0]
var next=document.getElementsByClassName("next")[0]
var dots=document.getElementsByClassName("dots")[0]
var aLi=dots.getElementsByTagName("li")
var index=0
next.onclick=function(){
index++
if(index>4){
index=0
}
for (var i = 0; i < img.length; i++) {
img[i].style.opacity=0
aLi[i].className=""
}
img[index].style.opacity=1
aLi[index].className="active"
}
prev.onclick=function(){
index--
if(index<0){
index=4
}
for (var i = 0; i < img.length; i++) {
img[i].style.opacity=0
aLi[i].className=""
}
img[index].style.opacity=1
aLi[index].className="active"
}
for (var i = 0; i < aLi.length; i++) {
aLi[i].count=i
aLi[i].onclick=function(){
for (var i = 0; i < aLi.length; i++) {
aLi[i].className=""
img[i].style.opacity=0
}
this.className="active"
img[this.count].style.opacity=1
index=this.count
}
}
</script>
</html>