【HTML】如何实现无缝循环的图片滚动效果？

html-css09

【HTML】如何实现无缝循环的图片滚动效果？,第1张

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

marquee和js两种方法，我建议使用js的，marquee兼容性不好，只兼容IE浏览器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML xmlns="http://www.w3.org/1999/xhtml">

<HEAD>

<meta charset="utf-8" />

<TITLE>分别用marquee和div+js实现首尾相连循环滚动效果</TITLE>

</HEAD>

<BODY>

用marquee实现首尾相连循环滚动效果（仅IE）：<br /><br />

<MARQUEE behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML" scrollamount="3" width="100"><SPAN unselectable="on"><img src="img/menu_trigger.png"><img src="img/menu_trigger.png"><img src="img/menu_trigger.png"><img src="img/menu_trigger.png"><img src="img/menu_trigger.png"></SPAN></MARQUEE>

<br /><br />用DIV+javascript实现首尾相连循环滚动效果（兼容firefox）：<br /><br />

<DIV id="scrollobj" style="white-space:nowrapoverflow:hiddenwidth:500px"><span>这里是要滚动的内容</span></DIV>

<script language="javascript" type="text/javascript">

<!--

function scroll(obj) {

var tmp = (obj.scrollLeft)++

//当滚动条到达右边顶端时

if (obj.scrollLeft==tmp) obj.innerHTML += obj.innerHTML

//当滚动条滚动了初始内容的宽度时滚动条回到最左端

if (obj.scrollLeft>=obj.firstChild.offsetWidth) obj.scrollLeft=0

}

setInterval("scroll(document.getElementById('scrollobj'))",20)

//-->

</script>

</BODY>

</HTML>

望采纳！

向上：程序代码

<div id=demo style="overflow:hiddenwidth:128pxheight:300px">

<div id=demo1>

<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>

<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>

<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>

<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>

<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>

<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>

<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>

<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>

<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>

<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>

<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>

</div>

<div id=demo2></div>

</div>

<script language="javascript">

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetTop-demo.scrollTop<=0)

demo.scrollTop-=demo1.offsetHeight

else{

demo.scrollTop++

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

向下：程序代码

<div id=demo style="overflow:hiddenwidth:128pxheight:300px">

<div id=demo1>

<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>

<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>

<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>

<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>

<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>

<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>

<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>

<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>

<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>

<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>

<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>

</div>

<div id=demo2></div>

</div>

<script language="javascript">

var speed=30

demo2.innerHTML=demo1.innerHTML

demo.scrollTop=demo.scrollHeight

function Marquee(){

if(demo1.offsetTop-demo.scrollTop>=0)

demo.scrollTop+=demo2.offsetHeight

else{

demo.scrollTop--

}

}

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"><table align=left

cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="gfjs.gif"><img

src="bxtt.gif"><img src="bzjd.gif"><img src="gfjs.gif"><img src="bxtt.gif"><img

src="bzjd.gif"></td><td id=demo2 valign=top></td></tr></table></div>

<script>

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

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"><table align=left

cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="gfjs.gif"><img

src="bxtt.gif"><img src="bzjd.gif"><img src="gfjs.gif"><img src="bxtt.gif"><img

src="bzjd.gif"></td><td id=demo2 valign=top></td></tr></table></div>

<script>

var speed=30

demo2.innerHTML=demo1.innerHTML

demo.scrollLeft=demo.scrollWidth

function Marquee(){

if(demo.scrollLeft<=0)

demo.scrollLeft+=demo2.offsetWidth

else{

demo.scrollLeft--

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>