Question

怎样用css代码设置3张图片重复滚动?

Answer 1

要用JS来控制的，单纯的CSS做不到，给你个代码，可以直接拿去用：

<div id="dpro" style="overflow:hidden;width: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&nbsp;</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&nbsp;…</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&nbsp;…</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&nbsp;…</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">&nbsp; </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>

Answer 2

不能太理解你的意思 是需要3张图片轮换显示？还是你所谓的滚动是从屏幕左侧到右侧 或者是从上到下的？以上几种效果 一般来说要配合JS才好实现，如果需要请说清楚 可以给你提供一段代码