不间断连续图片滚动效果的制作方法(HTML)

答案：以前我们站点也介绍过连续滚动的图片，但缺陷是有间断。如何制作连续不间断的播放滚动呢？请参看制作方法： 
　　先制作向上滚动的效果： 
　　插入代码： 
<!-- 指向链接图片url --> 
<base href=>http://www.it365cn.com";> 
<div id=demo style=overflow:hidden;height:150;width:90;background:#214984;color:#ffffff> 
<div id=demo1> 
<!-- 定义图片 --> 
<img src="images/logo_1.gif"> 
<img src="images/logo/flashempire.gif"> 
<img src="images/logo.gif"> 
<img src="images/logo/5dmedia.gif"> 
<img src="images/logo/macromedia.gif"> 
<img src="images/logo/sucaiw.gif"> 
<img src="images/logo/blueieda.gif"> 
<img src="images/logo/htmlcn.gif"> 
<img src="images/logo/fwcn.gif"> 
</div> 
<div id=demo2></div> 
</div> 

<script> 
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> 

　　制作向下滚动的效果： 
　　将上面“制作向上滚动的效果”中的红色字体Js部分替换成： 
<script> 
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> 

　　制作向左滚动的效果： 
<base href=>http://www.it365cn.com";> 
<div id=demo style=overflow:hidden;height:33;width:500;background:#214984;color:#ffffff> 
<table align=left cellpadding=0 cellspace=0 border=0> 
<tr> 
<td id=demo1 valign=top><img src="images/logo_1.gif"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif"><img src="images/logo/fwcn.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> 

　　制作向右滚动的效果： 
　　将上面“制作向左滚动的效果”中的红色字体Js部分替换成： 
<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> 

　　制作的方法就简单的介绍完成了。

例子（向左滚动）：

<table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td height="8" align="center" valign="middle"></td>
                      </tr>
                      <tr>
                        <td align="center" valign="middle">
        <div id=demo style=overflow:hidden;height:102;width:520;background:#ffffff;color:#ffffff>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td align="center" valign="middle" id=demo1>
                          <span class="style4">
                          <%set rs9 = conn.execute("select * from pro where jp='1'  order by id desc")
                     if rs9.eof then
                         response.write("暂 无 产 品 !")
                     else%>
                          </span>
                          </span>
                          <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                     

上一个：CSS代码属性大全(HTML)
下一个：制作透明背景的iframe(HTML)