用transition以及left实现轮播图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;list-style:none;}
.slide{ width: 800px;height: 400px; position:relative;overflow: hidden;margin:100px auto;}
.viewbox{width: 6000px; height: 400px;position: absolute; left:0;transition:0.3s; }
.viewbox li{float: left;width: 800px;height: 400px;}
.viewbox li img{width: 100%;height: 100%;}
.arrow p{ position: absolute;width: 30px; height: 50px;line-height: 50px;color:#fff; background: rgba(0,0,0,0.5);text- align:center; top:50%;margin-top:-25px;cursor:pointer;}
.arrow .next{right:0;}
.dots li{width: 8px; height: 8px;background: deepskyblue;border-radius:50%;margin:0 5px; float: left; border:1px solid deepskyblue; transition:0.3s; }
.dots{position: absolute; bottom:10px;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 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
}
viewbox.style.left=-index*800+"px"
for(var i=0;i<aLi.length;i++){
aLi[i].className=""
}
aLi[index].className="active"
}
prev.onclick=function(){
index--
if(index<0){
index=4
}
viewbox.style.left=-index*800+"px"
for(var i=0;i<aLi.length;i++){
aLi[i].className=""
}
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=""
}
viewbox.style.left=-(this.count)*800+"px"
this.className="active"
index=this.count
}
}
</script>
</html>