1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。
2、这里是html文件，引入css和html代码文件，如图所示。
3、这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。
4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。
5、如图所示这里是效果图，会根据时间轮播显示下一张图片 了。
要用JS来控制的，单纯的CSS做不到，给你个代码，可以直接拿去用：
<div id="dpro" style="overflow:hiddenwidth:100%px padding:10px margin:0 10px"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="dpro1">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><div class="index_pic"><a href="product_show.asp?id=41" title="轻轮"><img src="UploadFiles/20131017164757151.png" width="148" height="139" /><span>轻轮</span></a></div></td>
<td><div class="index_pic"><a href="product_show.asp?id=40" title="轻轮"><img src="UploadFiles/20131017164724200.png" width="148" height="139" /><span>轻轮</span></a></div></td>
<td><div class="index_pic"><a href="product_show.asp?id=39" title="SB-6509-948 "><img src="UploadFiles/2013101716460566.png" width="148" height="139" /><span>SB-6509-948 </span></a></div></td>
<td><div class="index_pic"><a href="product_show.asp?id=38" title="CPT-5854-85BRK4 "><img src="UploadFiles/20131017164529355.png" width="148" height="139" /><span>CPT-5854-85BRK4 …</span></a></div></td>
<td><div class="index_pic"><a href="product_show.asp?id=37" title="CPT-4856-85BRK4 "><img src="UploadFiles/20131017164455666.png" width="148" height="139" /><span>CPT-4856-85BRK4 …</span></a></div></td>
<td><div class="index_pic"><a href="product_show.asp?id=36" title="CPT-5851-85BRK4 "><img src="UploadFiles/20131017164420861.png" width="148" height="139" /><span>CPT-5851-85BRK4 …</span></a></div></td>
<td><div class="index_pic"><a href="product_show.asp?id=35" title="医用脚轮"><img src="UploadFiles/20131017164359417.png" width="148" height="139" /><span>医用脚轮</span></a></div></td>
<td><div class="index_pic"><a href="product_show.asp?id=34" title="轻轮"><img src="UploadFiles/20131017164322134.jpg" width="148" height="139" /><span>轻轮</span></a></div></td>
<td><div class="index_pic"><a href="product_show.asp?id=33" title="京华小叶花"><img src="UploadFiles/20139281463567.jpg" width="148" height="139" /><span>京华小叶花</span></a></div></td>
</tr>
</table>
</td>
<td id="dpro2">  </td>
</tr>
</table>
</div>
<!-- pro end -->
<script language="javascript">
var ddp = document
var dpro = ddp.getElementById("dpro")
var dpro1 = ddp.getElementById("dpro1")
var dpro2 = ddp.getElementById("dpro2")
var dspeed=5 //滚动的速度,数值越大越慢
dpro2.innerHTML=dpro1.innerHTML
function Marquee()
{
if(dpro2.offsetWidth-dpro.scrollLeft<=0)
{
dpro.scrollLeft-=dpro1.offsetWidth
}
else
{
dpro.scrollLeft++
}
}
var MyMar=setInterval("Marquee()",dspeed)
dpro.onmouseover=function()
{
clearInterval(MyMar)
}
dpro.onmouseout=function()
{
MyMar=setInterval("Marquee()",dspeed)
}
</script>
