制作网页中的滚动图片，怎样循环播放。

Question

制作网页中的滚动图片，怎样循环播放。
我用的代码<div id="butong_net_left" style="overflow:hidden;width:500px;">

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

<tr><td id="butong_net_left1" valign="top" align="center">

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

<tr align="center">

<td><img src="<img src="插入需要滚动的图片"></td>

<td><img src="插入需要滚动的图片"></td>

<td><img src="插入需要滚动的图片"></td>

<td><img src="插入需要滚动的图片"></td>

<td><img src="插入需要滚动的图片"></td>

</tr>

</table>

</td>

<td id="butong_net_left2" valign="top"></td>

</tr>

</table>

</div>

<script>

var speed=30//速度数值越大速度越慢

butong_net_left2.innerHTML=butong_net_left1.innerHTML

function Marquee3(){

if(butong_net_left2.offsetWidth-butong_net_left.scrollLeft<=0)

butong_net_left.scrollLeft-=butong_net_left1.offsetWidth

else{

butong_net_left.scrollLeft++

}

}

var MyMar3=setInterval(Marquee3,speed)

butong_net_left.onmouseover=function() {clearInterval(MyMar3)}

butong_net_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}

</script>

能滚动但播完就停了，怎样才能自动循环呢？

Answer 1

1.打开Dreamweaver创建新页面，如图：

2.插入如下代码，如图：

<!--最新图文代码开始-->
<%
set rs3=server.CreateObject("ADODB.RecordSet")
rs3.Source ="select top " & top_img & " * from "& db_News_Table &" where picnews=1 and checkked=1 and picname<>'null' order by NewsID DESC"
rs3.Open rs3.Source,conn,3,3
if not rs3.EOF Then
%>
<div align='center' id='demo' style='overflow:hidden;height:125px;width:990px;'><!--滚动区的高度和宽度-->
<table align='center' cellpadding='0' cellspace='0' border='0'>
<tr>
<td id='demo1' valign='top'>
<table width='100%' cellpadding='0' cellspacing='0' border='0' align='center'>
<tr valign='top'>
<%
while not rs3.EOF
fileExt=lcase(getFileExtName(rs3("picname")))
%>
<td align='center'>
<TABLE width=100% border=0 align=center cellPadding=0 cellSpacing=0>
<TR>
<TD width=8 rowspan=3 >&nbsp;</TD>
<TD vAlign=top width=8><img src='Images/bg_0ltop.gif' width=10 height=10></TD>
<TD background=images/bg_01.gif></TD>
<TD vAlign=top width=7><img src='Images/bg_0rtop.gif' width=10 height=10></TD>
<TD width=7 rowspan=3 vAlign=top>&nbsp;</TD>
</TR>
<TR>
<TD background='Images/bg_03.gif'>&nbsp;</TD>
<TD align="center" bgcolor="#E9E9E9">
<%if fileext="jpg" or fileext="bmp" or fileext="png" or fileext="gif" then%>
<table style="TABLE-LAYOUT: fixed" height=80 cellSpacing=0 cellPadding=0 width=105 border=0>
<tr>
<td style="HEIGHT: 80px">
<a class=middle href='ReadNews.asp?NewsID=<%=rs3("NewsID")%>' target=_blank title='<%=rs3("title")%>'><img  src='<%=FileUploadPath & rs3("picname")%>' width='105' border=0></a>
</td>
</tr>
</table>
<%else if fileext="swf" then%>
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'  codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0' width='105' height='80'>
<param name=movie value='<%=FileUploadPath & rs3("picname")%>'>
<param name=quality value=high>
<param name='Play' value='-1'>
<param name='Loop' value='0'>
<param name='Menu' value='-1'>
<param name='wmode' value='transparent'>
<embed src='<%=FileUploadPath & rs3("picname")%>' width='105' height='80' pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash' type='application/x-shockwave-flash'></embed>
</object>
<a class=middle href='ReadNews.asp?NewsID=<%=rs3("NewsID")%>' target=_blank title='<%=rs3("title")%>'></a>
<%
end if
end If
%>
</TD>
<TD background='Images/bg_04.gif'>&nbsp;</TD>
</TR>
<TR>
<TD><img src='Images/bg_0lbottom.gif' width=10 height=10></TD>
<TD><img src='Images/bg_02.gif'></TD>
<TD><img src='Images/bg_0rbottom.gif' width=10 height=10></TD>
</TR>
<TR>
<TD>&nbsp;</TD>
<TD colspan=3 align=center height=20 valign='top' background='Images/bg_05.gif'>
<a class=middle href='ReadNews.asp?NewsID=<%=rs3("NewsID")%>' target=_blank title='<%=rs3("title")%>'><%=CutStr(htmlencode4(rs3("title")),14)%></a>
</TD>
<TD>&nbsp;</TD>
</TR>
</TABLE>
</td>
<%
rs3.MoveNext
wend
%>
</tr>
</table>
</td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
<%if top_img >4 then%>
<script>
var speed=15
demo2.innerHTML=demo1.innerHTML
function Marquee1(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee1,speed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}
</script>
<%
end if
else
Response.Write "暂 æ—  æœ€ æ–° å›¾ æ–‡"
end if
rs3.close
set rs3=nothing
%>
<!--最新图文代码结束-->

3.编写完成代码后查看预览效果图，如下：

注意事项:代码中select top " & top_img & " * from "& db_News_Table &" where picnews=1 and checkked=1 and picname<>'null' order by NewsID DESC"根据网站的数据库路径来定义数据表，包括ID编号的降序和顺序。

Answer 2

<MARQUEE scrollAmount=3 scrollDelay=1 direction=right width=990
<marquee onmouseover="this.stop();" onMouseOut="this.start();"
height=250><a href="网站"><IMG src="图片网址" width=180 border=0>
<a href="网站"><IMG src="图片网址" width=180 border=0>
<a href="网站"><IMG src="图片网址" width=180 border=0>
<a href="网站"><IMG src="图片网址" width=180 border=0>
<a href="网站"><IMG src="图片网址" width=180 border=0>
<a href="网站"><IMG src="图片网址" width=180 border=0>
<DIV></DIV></MARQUEE></CENTER>

我才学的 呵呵！ direction=right 滚动的方向 scrollAmount=3滚动的速度 鼠标在上面还要停的哦！ 其它的我也不知道了
呵呵！

你可以先到网站去看看都

参考资料：www.kyt1.net

Answer 3

参考一下下面这个代码，注意几个要点，滚动区域的宽度，所有图片总宽度，都会影响代码的滚动效果，可以参考资料中的网址下方的滚动效果
<div id="demo" style="OVERFLOW: hidden; height:128px;width:460px;color:#ffffff">
<div id="maque">
<nobr><div id="demo1">

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

<tr><td id="butong_net_left1" valign="top" align="center">

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

<tr align="center">

<td><img src="<img src="插入需要滚动的图片"></td>

<td><img src="插入需要滚动的图片"></td>

<td><img src="插入需要滚动的图片"></td>

<td><img src="插入需要滚动的图片"></td>

<td><img src="插入需要滚动的图片"></td>

</tr>

</table>

</td>

<td id="butong_net_left2" valign="top"></td>

</tr>

</table>
</div>

</div><div id="demo2"></div></nobr></div>
<script type="text/javascript">
var speed=60
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>

参考资料：http://www.by120.org

Answer 4

这里有一个无缝滚动效果
你可以参考一下

参考资料：http://www.blueidea.com/common/shoutbox/redir.asp?7=k&id=12229

本回答被提问者采纳