用transition以及left实现轮播图

用transition以及left实现轮播图：

html代码如下

        <div class="slide">
			<ul class="viewbox">
				<li><img src="../06选项卡/img/01.jpg" alt="" /></li>
				<li><img src="../06选项卡/img/02.jpg" alt="" /></li>
				<li><img src="../06选项卡/img/03.jpg" alt="" /></li>
				<li><img src="../06选项卡/img/04.jpg" alt="" /></li>
				<li><img src="../06选项卡/img/05.jpg" alt="" /></li>
				<li><img src="../06选项卡/img/01.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>

css代码如下

        <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 .prew{left:0;}
			.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;
				width:100px;
				height:10px;
				left:50%;
				margin-left:-50px;
				}
			.dots li.active{background:#fff;}
		</style>

js代码如下

        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			//同步
			}
		}