div {
border: 1px solid red
width: 500px
height: 280px
/*background-image:url(..//pic/newimages/1.png)*/
position: relative
animation: firstone 10s infinite
animation-direction: alternate
-webkit-animation: firstone 10s infinite
-webkit-animation-direction: alternate
}
@keyframes firstone {
0% {
background-image: url(..//pic/newimages/1.png)
left: 20px
top: 0
}
25% {
background-image: url(..//pic/newimages/8.jpg)
left: 280px
top: 0
}
50% {
background-image: url(..//pic/newimages/7.jpg)
left: 280px
top: 280px
}
75% {
background-image: url(..//pic/newimages/15.jpg)
left: 20px
top: 280px
}
20% {
background-image: url(..//pic/newimages/19.jpg)
left: 20px
top: 0
}
}
@-webkit-keyframes firstone {
0% {
background-image: url(..//pic/newimages/2.png)
left: 0
top: 0
}
25% {
background-image: url(..//pic/newimages/8.jpg)
left: 280px
top: 0
}
50% {
background-image: url(..//pic/newimages/7.jpg)
left: 280px
top: 280px
}
75% {
background-image: url(..//pic/newimages/15.jpg)
left: 0
top: 280px
}
20% {
background-image: url(..//pic/newimages/19.jpg)
left: 0
top: 0
}
}
里面写一个空的div就可以了，放图片就是自己放吧。
要用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>
1、素材的准备。为了更好的表现网站的风格和特色，具备一些更富表现力和吸引力的图片是必不可少的；
2、在电脑上找到并且打开Dreamweaver8，重新建立一个网页文件，并且把网页文件保存，且命名为“index.html"文件；
3、在完成网页文件保存和命名为“index.html"文件以后，切换至代码编辑界面，输入相应的程序代码；
4、新建一CSS样式表文件，并将该文件保存到与“index.html”相同的目录下，文件名称为“MyStyle.css"；
5、在样式表文件"MyStyle.css”文件的完成以后，打开样式表文件"MyStyle.css”文件输入相应的程序代码；
6、在网页文件"index.html"中添加对该样式表的引用：“<link rel="stylesheet" type="text/css" href="MyStyle.css">”，同时新建一个JS文件，并将该文件另存为“MoveEffect.js"；
7、在JS文件”MoveEffect.js“文件建立完成以后，同样打开JS文件”MoveEffect.js“文件输入程序的代码；
8、完成上述程序运行以后，在主页文件"index.html”中添加对该“MoveEffect.js”文件的引用，“<script type="text/javascript" src="MoveEffect.js"></script>”，打开“index.html”网页文件即可。
