带缩略图 轮播图

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			#outer{
				position: relative;
				margin: 30px auto 0;
				width: 800px;
				height: 450px;
				overflow: hidden;
			}
			#inner{
				position: absolute;
				left: 0;
				top: 0;
				width: 3500px;
				height: 450px;
				overflow: hidden;
			}
			#inner img{
				width: 800px;
				height: 450px;
				float: left;
				overflow: hidden;
			}
			#tab{
				width: 800px;
				margin: 0 auto;
				overflow: hidden;
			}
			#tab img{
				width: 200px;
				height: 100px;
				float: left;
				opacity: 1;
			}
		</style>

　　

<div id="outer">
			<div id="inner" style="left: 0;">
				<img src="img/5.jpg" alt="" />
				<img src="img/6.jpg" alt="" />
				<img src="img/7.jpg" alt="" />
				<img src="img/8.jpg"/>
			</div>
		</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"/>
		</div>
		
		<script type="text/javascript">
			var outer = document.getElementById("outer");
			var inner = document.getElementById("inner");
			var tab = document.getElementById("tab");
			var tabImg = tab.getElementsByTagName("img");
			var time = null;
			for(var i = 0 ; i < tabImg.length;i++)
			{
				tabImg[i].index = i;
				tabImg[i].onmouseover = function(){
					clearInterval(time);
					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);
					var end = this.index*(-800);
					var speed =(end - start)/100  ;
					
					time =setInterval(function(){
						start += speed;
						if(start >= end && speed >0)
						{
							clearInterval(time);
							start = end;
						}
						if(start <= end && speed <0)
						{
							clearInterval(time);
							start = end;
						}
						inner.style.left = start +"px";
					},1)
				}
			}
		</script>