html怎么设置滚动图片？

html-css09

html怎么设置滚动图片？,第1张

方案一：直接使用HTML的滚动标签 marquee ，把图片放入滚滚标签内部，代码如下：

<marquee>

<img src='1.jpg'>

<img src='2.jpg'>

<img src='3.jpg'>

<img src='4.jpg'>

</marquee>

方案二：使用第三方插件，比如swiper.js，

插件

网站中，有时为了更好的利用有限的页面空间展示更多的内容，也为了丰富网站页面自身的表现样式，我们往往会用到图片滚动的效果。想要实现这种效果，只需要在想要显示的表格或网页中加入以下代码即可实现：<div id=demo style="overflow:hiddenheight:100pxwidth:300px"><table align=leftcellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0056_缩小大小.JPG" /><img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0053_缩小大小.JPG" /><img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0054_缩小大小.JPG" /><img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0058_缩小大小.JPG" /><img height="200" alt="" width="150" src="/lazysite/user_space/7788/CIMG0059_缩小大小.JPG" /><img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0063_缩小大小.JPG" /><img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0070_缩小大小.JPG" /><img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0071_缩小大小.JPG" /><img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0072_缩小大小.JPG" />//这个图片的地址可以是相对的也可以是绝对的</td><td id=demo2 valign=top></td></tr></table></div><script>var speed=30demo2.innerHTML=demo1.innerHTMLfunction Marquee(){if(demo2.offsetWidth-demo.scrollLeft<=0)demo.scrollLeft-=demo1.offsetWidthelse{demo.scrollLeft++}}var MyMar=setInterval(Marquee,speed)demo.onmouseover=function() {clearInterval(MyMar)}demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}</script>下面，我们就上面代码的主要部分进行分析：<div id=demo style="overflow:hiddenheight:100pxwidth:300px">这段代码中下划线的部分表示我们这段滚动图片所占用区域的大小。用户可根据页面的实际需要进行调节。但一般情况下至少要大于或等于图片的高度和宽度。<img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0056_缩小大小.JPG" />上面这段代码是图片的代码。每加入一行如上代码，那就会多出一个展示的图片。图片可以是一个，也可以是无数个。需要强调的是，每个图片的高度和宽度应尽量的统一大小，主要显示出来的效果才会更好看。var speed=30 这行代码是控制图片滚动的速度。数字越小，滚动的也就越快；相反，数字越大，滚动的也就越慢。

<DIV id=demo style="overflow: hiddenwidth: 600pxheight: 190pxtop:485pxleft:252pxposition: absolute">

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td valign="top" id=demo1>

<!-- 循环滚动的图片 -->

<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" >

<tr>

<td width="200" align="center" style="height: 151px">

<a href="WebDeSign.aspx">

<img src="images/indexpic1.gif" width="194" height="147" border="0" /></a>

</td>

<td width="200" align="center" style="height: 151px">

<a href="SoftWare.aspx">

<img src="images/indexpic2.gif" width="194" height="147" border="0" /></a>

</td>