在html中怎么处理让3张图片无限循环!

html-css08

在html中怎么处理让3张图片无限循环!,第1张

只用html是实现不了的

html里的marque虽然可以无限循环滚动 但之间有间隙

如果要实现无间隙的连续循环 就只能用js

直接百度搜索 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 这行代码是控制图片滚动的速度。数字越小,滚动的也就越快;相反,数字越大,滚动的也就越慢。