使用完美运动框架写无缝轮播

html

<div class="slide">
	<ul class="viewbox">
		<li><img src="img/05.jpg" alt="" /></li>
		<li><img src="img/01.jpg" alt="" /></li>
		<li><img src="img/02.jpg" alt="" /></li>
		<li><img src="img/03.jpg" alt="" /></li>
		<li><img src="img/04.jpg" alt="" /></li>
		<li><img src="img/05.jpg" alt="" /></li>
		<li><img src="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 type="text/css">
			*{margin:0;padding:0;}
			.slide{width:600px;height:400px;position: relative;overflow: hidden;margin:10px auto;}
			.viewbox{width:6000px;height:400px;position: absolute;left:-600px;}
    		.viewbox li{float: left;width:600px;height:400px;list-style:none;position: relative;}
	        .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;
				font-size:30px;
			}
			.arrow .prev{left:0;}
			.arrow .next{right:0;}
			.dots li{
				width:8px;
				height:8px;
				background: deepskyblue;
				border-radius:50%;
				margin:0 5px;
				float: left;
				list-style: none;
				border:1px solid deepskyblue;
			}
			.dots{
				position: absolute;
				bottom:50px;
				width:100px;
				height:10px;
				left:50%;
				margin-left:-50px;
			}
			.dots li.active{background: #fff;}
			.viewbox li div{
				width:100%;
				position: absolute;
				line-height:40px;
				background: rgba(0,0,0,.5);
				bottom:0;
				left:0;
				text-align: center;
				color:#fff;
			}
			
		</style>

js

<script type="text/javascript">
		var slide=document.querySelector(".slide")
		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 p=document.getElementsByClassName("p")    
		var index=1
		next.onclick=function(){
			console.log(index);
			if(index>=6){
				index=1
				viewbox.style.left="-600px"
			}
			index++
			startMove(viewbox,"left",-index*600)
			
			for (var i = 0; i < aLi.length; i++) {
				aLi[i].className=""
			}
			if(index>=6){
				aLi[0].className="active"
			}else{
				aLi[index-1].className="active"
			}
		}
		prev.onclick=function(){
			
			if(index<=0){
				index=5
				viewbox.style.left="-3000px"
			}
			index--
			startMove(viewbox,"left",-index*600)
				

			for (var i = 0; i < aLi.length; i++) {
				aLi[i].className=""
			}
			if(index<=0){
				aLi[4].className="active"
			}else{
				aLi[index-1].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=""
				}
			startMove(viewbox,"left",-(this.count+1)*600)
				this.className="active"
				index=this.count+1
			}
		}

		var timer=setInterval(next.onclick,3000)
		slide.onmouseleave=function(){
			timer=setInterval(next.onclick,3000)
		}
		slide.onmouseenter=function(){
			clearInterval(timer)
		}



		function getStyle(ele,attr){
			return parseFloat(window.getComputedStyle(ele)[attr])
		}
		function startMove (ele,attr,_target,fn) {
			clearInterval(ele.timer)
			ele.timer=setInterval(function () {
				var st=getStyle(ele,attr)
				var speed=(_target-st)/10
				if(attr=="opacity"){
					st=st*100
					speed=(_target-st)/10
				}
				speed>0?speed=Math.ceil(speed):speed=Math.floor(speed)
				if(st==_target){
					clearInterval(ele.timer)
					if(fn){
						fn()
					}
				}else{
					if(attr=="opacity"){
						st+=speed
						ele.style.filter="alpha(opacity="+st+")"
						ele.style.opacity=st/100
					}else{
						ele.style[attr]=st+speed+"px"
					}
				}
			},20)
		}
	</script>