带缩略图 左右按钮 轮播图

<style>
			#outer{
				position: relative;
				 800px;
				height: 450px;
				margin: 30px  auto  0;
				overflow: hidden;
				
			}
			#inner{
				position: absolute;
				left: 0;
				top: 0;
				4800px ;
				height: 450px;
				overflow: hidden;
				
			}
			#inner img{
				 800px;
				height: 450px;
				float: left;
			}
			#prePage{
				position: absolute;
				top: 50%;
				left: 0;
				 50px;
				height: 100px;
				font-size: 30px;
				color: white;
				text-align: center;
				line-height: 100px;
				background: rgba(200,200,200,0.5);
				margin-top: -50px;
				
			}
			#nextPage{
				position: absolute;
				top: 50%;
				right: 0;
				 50px;
				height: 100px;
				font-size: 30px;
				color: white;
				text-align: center;
				line-height: 100px;
				background: rgba(200,200,200,0.5);
				margin-top: -50px;
				
			}
			#tab{
				 800px;
				height: 100px;
				
				margin: 0 auto;
			}
			#tab img{
				 200px;
				height: 100px;
				float: left;
				opacity: 1;
			}
		</style>

　　

<div id="outer">
			<div id="inner">
				<!--<img src="img/8.jpg" alt="" />-->
				<img src="img/5.jpg" alt="" />
				<img src="img/6.jpg" alt="" />
				<img src="img/7.jpg" alt="" />
				<img src="img/8.jpg" alt="" />
				<!--<img src="img/5.jpg" alt="" />-->
			</div>
			<span id="prePage"><</span ><span id="nextPage">></span>
		</div>
		<div id="tab">
				<img src="img/5.jpg" alt="" />
				<img src="img/6.jpg" alt="" />
				<img src="img/7.jpg" alt="" />
				<img src="img/8.jpg" alt="" />
		</div>

		<script src="js/move.js"></script>
		<script>
			var inner = document.getElementById("inner");
			var prePage = document.getElementById("prePage");
			var nextPage = document.getElementById("nextPage");
			var tab = document.getElementById("tab");
			var tabImg = tab.getElementsByTagName("img");
			
			
//			var page = 1;
//			var time;
//			var flag = true;
//			var time1 = setInterval(function(){
//				page++;
//				changePage();
//			},2000)
//			outer.onmouseover = function(){
//				clearInterval(time1);
//			}
//			outer.onmouseout = function(){
//				time1 = setInterval(function(){
//				page++;
//				changePage();
//			},2000);
//			}
//			prePage.onclick = function(){
//				if(flag)
//				{
//					page --;
//					changePage();
//					flag = false;
//				}
//				
//			}
//			nextPage.onclick = function(){
//				if(flag)
//				{
//					page++;
//					changePage();
//					flag = false;
//				}
//				
//			}
//			function changePage(){
//				var start = parseInt(inner.style.left);
//				var end = page *(-800);
//				
//				move(start,end);
//			}
//			function move(start,end){
//				
//				var speed = (end - start )/100;
//				
//				time = setInterval(function(){
//					start += speed;
//					if(start == end)
//					{
//						clearInterval(time);
//						if(start == (-4000))
//						{
//							page = 1;
//							start = -800;
//						}
//						if(start == 0)
//						{
//							page = 4;
//							start = -3200;
//						}
//						flag = true;
//					}
//					
//					inner.style.left = start + "px";
//				},1)
//			}
//			
//			for(var i = 0 ;i<tabImg.length;i++)
//			{
//				tabImg[i].index = i ;
//				tabImg[i].onmouseover = function(){
//					for(var j = 0 ; j < tabImg.length;j++)
//					{
//						tabImg[j].style.opacity = "";
//					}
//					tabImg[this.index].style.opacity = "0.5";
//					
//					var start = parseInt(inner.style.left);//-800
//					var end = (this.index+1)*(-800);//-1600
//					var speed = (end - start) /100;
//					
//					var time2 = setInterval(function(){
//						start += speed;
//						if(start>=end && speed >0)
//						{
//							clearInterval(time2);
//							start = end;
//						}
//						if(start <= end && speed <0)
//						{
//							clearInterval(time2);
//							start = end;
//						}
//						inner.style.left = start +"px";
//					},1)
//					
//				}
//				
//				
//			}

			var page = 0;
			var time;
			for(var i = 0 ; i < tabImg.length;i++)
			{
				tabImg[i].index = i;
				tabImg[i].onmouseover = function(){
					clearInterval(time);
					page = this.index;
					move(inner,"left",this.index*(-800),100,function(){
						time = setTimeout(movec,1000);
					});
				}
			}
			movec();
			function movec(){
				page++;
				if(page >3){
					page=0;
				}
				var end = page*(-800);
				move(inner,"left",end,100,function(){
					time = setTimeout(movec,1000);
				})
			}
			prePage.onclick = function(){
				clearTimeout(time);
				page++;
				if(page>3)
				{
					page = 0;
				}
				move(inner,"left",page*(-800),100,function(){
					time = setTimeout(movec,1000);
				})
		
			}
			
			nextPage.onclick = function(){
				clearTimeout(time);
				page--;
				if(page<0)
				{
					page = 3;
				}
				move(inner,"left",page*(-800),100,function(){
					time = setTimeout(movec,1000);
				})
		
			}
			
		</script>

　　move.js

//一次改進版
//function move(obj, attr, end, start, stepNum) {
//
//	var speed = (end - start) / stepNum;
//	this.time = setInterval(function() {
//		start += speed;
//		if (start >= end && speed > 0) {
//			clearInterval(this.time);
//			start = end;
//		}
//		if (start <= end && speed < 0) {
//			clearInterval(this.time);
//			start = end;
//		}
//		obj.style[attr] = start + "px";
//	}, 10)
//}

function getStyle(obj,attr){
	if(obj.currentStyle){
		return obj.currentStyle[attr]
	}else{
		return getComputedStyle(obj)[attr];
	}
}

//二次改進版
function move(obj, attr, end,stepNum,fn) {
	var start = parseInt(getStyle(obj,attr));
	var speed = (end - start) / stepNum;
	clearInterval(obj.time);
	obj.time = setInterval(function() {
		start += speed;
		if (start >= end && speed > 0) {
			clearInterval(obj.time);
			start = end;
			if(fn){
				fn();
			}
			
		}
		if (start <= end && speed < 0) {
			clearInterval(obj.time);
			start = end;
			if(fn)
			{
				fn();
			}
			
		}
		obj.style[attr] = start + "px";
	}, 10)
}