显示多张的图片轮播：
关键点：算好div,table,图片的宽度
<style>
*{
margin: 0px;
padding: 0px;
}
.nav{
width: 800px;
height: 200px;
position: relative;
background-color: yellow;
overflow: hidden;
}
#aa{
position:relative;
top:0px;
left:0px;
transition:1s;
}
#aa img:hover{
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="nav">
<table cellpadding="0" cellspacing="0" id="aa">
<tr height="200">
<td><img src="1.jpg" width="200" height="200px"/></td>
<td><img src="2.jpg" width="200" height="200px"/></td>
<td><img src="3.jpg" width="200" height="200px"/></td>
<td><img src="4.jpg" width="200" height="200px" /></td>
<td><img src="5.jpg" width="200" height="200px" /></td>
<td><img src="6.jpg" width="200" height="200px" /></td>
<td><img src="7.jpg" width="200" height="200px" /></td>
</tr>
</table>
</div>
</body>
</html>
<script>
document.getElementById("aa").style.left="0px";
function shao()
{
var aa = parseInt(document.getElementById("aa").style.left);
if(aa>-600)
{
document.getElementById("aa").style.left=(aa-200)+"px"
}
else
{
document.getElementById("aa").style.left="0px"
}
bb = window.setTimeout("shao()",1000);
}
bb = window.setTimeout("shao()",1000);
</script>
原文：http://www.cnblogs.com/chenguanai/p/6670363.html