怎么用CSS代码实现,好多图片横向的不间断滚动?

html-css073

怎么用CSS代码实现,好多图片横向的不间断滚动?,第1张

1、在html编辑器软件内,新建html页面,(一般我们常使用的两款编辑器是HBuilder和Adobe Dreamweaver,这里我使用的软件是HBuilder)。

2、在<body></body>添加<div  class="nav"></div>,于<div  class="nav"></div>中间添加<ul></ul>,在<ul>内添加<li>标签,<li>内同时添加<a>标签,方便连接导航跳转。

3、在新建的<a></a>内,添加横向导航要显示的内容。

4、在<title></title>下方添加一个<style type="text/css"></style>。

5、源文件html保存后,使用浏览器打开预览效果。

要用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&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>

js写的 http://www.lanrentuku.com/js/d985.zip

使用方法:

1、依次引入slideshow.css与slideshow.js文件;

2、将代码复制到页面中即可。

3、可在代码中的SlideShow( )括号中设置切换图片的时间间隔,默认为3000。

百度JS下载 找一些下载站 可以找到各种各项的JS特效