html怎么设置滚动图片？

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

<marquee>

<img src='1.jpg'>

<img src='2.jpg'>

<img src='3.jpg'>

<img src='4.jpg'>

</marquee>

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

插件

<MARQUEE onmouseover=stop() onmouseout=start() scrollAmount=3 loop=infinite deplay="0"><IMG src="第一张图片地址" ><IMG src="第二张图片地址"></MARQUEE>

注释：

1) scrollAmount。它表示速度，值越大速度越快。

2) 加入onmouseover=stop() onmouseout=start()代码，鼠标指向循环文字图片时他们会停止滚动，鼠标离开时继续滚动。

给滚动图片加超链接

用<a href=>和</a>把<img>包围，并且img必须设border=0，否则图片会出现边框。例子如下：

<MARQUEE scrollAmount=3 loop=infinite deplay="0"><a href="链接网址"><img src="图片网址" border=0></a></MARQUEE>

图片从右到左滚动

<MARQUEE width=宽 height=高 onmouseover=stop() onmouseout=start() scrollAmount=速度 loop=infinite deplay="0"><img src="图片地址 "><img src="图片地址 ">···</MARQUEE>

图片从下到上滚动

<marquee behavior="scroll" direction=up width="宽" height="高" scrollamount="5" onmouseout="this.start()"><img src="图片网址 "><img src="图片网址 ">···</marquee>

带有超链接的图片实现滚动效果

<marquee behavior="scroll" direction=up width="120" height="60" scrollamount="1" scrolldelay="60" onmouseover="this.stop()" onmouseout="this.start()"><a target="cont" href="连接地址"><img src="http://图片地址" idth="88" height="33" border="0"></a><a target="cont" href="连接地址"><img src="图片地址" width="88" height="33" border="0"></a></marquee>

网站中，有时为了更好的利用有限的页面空间展示更多的内容，也为了丰富网站页面自身的表现样式，我们往往会用到图片滚动的效果。想要实现这种效果，只需要在想要显示的表格或网页中加入以下代码即可实现：<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 这行代码是控制图片滚动的速度。数字越小，滚动的也就越快；相反，数字越大，滚动的也就越慢。

---