<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>