本文介绍了一个使用HTML和JavaScript实现的轮播图效果，通过不断滚动包含多个指向同一URL的图片元素来达到展示目的。
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=GB2312">
<META content="MSHTML 6.00.6000.20815" name=GENERATOR></HEAD>
<BODY leftMargin=0 topMargin=0 marginwidth="0" marginheight="0">
<DIV align=left>
<TABLE cellSpacing=0 cellPadding=0 align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD class=border01 align=middle>
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 815px">
<TABLE height=100 cellSpacing=0 cellPadding=0 align=center border=0
cellspace="0">
<TBODY>
<TR>
<TD id=marquePic1 vAlign=top align=middle height=100>
<TABLE height=100 cellSpacing=1 cellPadding=0 width=815 border=0>
<TBODY>
<TR align=middle>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
src="images/200843172847.jpg" mce_src="images/200843172847.jpg" width=153 border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
src="images/20084317340383.jpg" mce_src="images/20084317340383.jpg" width=153 border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
src="images/200843173529652.jpg" mce_src="images/200843173529652.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
src="images/200843173633873.jpg" mce_src="images/200843173633873.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
src="images/200843173727600.jpg" mce_src="images/200843173727600.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
src="images/200843173946787.jpg" mce_src="images/200843173946787.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
src="images/200843174056740.jpg" mce_src="images/200843174056740.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
src="images/200843174213307.jpg" mce_src="images/200843174213307.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
src="images/200843174335514.jpg" mce_src="images/200843174335514.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
src="images/200843174433450.jpg" mce_src="images/200843174433450.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
src="images/200843174539975.jpg" mce_src="images/200843174539975.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
src="images/200843174648990.jpg" mce_src="images/200843174648990.jpg" width=153
border=0></A></TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD id=marquePic2 vAlign=top>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
<SCRIPT language=Javascript>
<!--
var speed=30;
var FGDemo=document.getElementById('demo');
var FGDemo1=document.getElementById('marquePic1');
var FGDemo2=document.getElementById('marquePic2');
FGDemo2.innerHTML=FGDemo1.innerHTML;
function Marquee1(){
if(FGDemo.scrollLeft>=FGDemo1.scrollWidth){
FGDemo.scrollLeft=0;
}else{
FGDemo.scrollLeft++;
}
}
var MyMar1=setInterval(Marquee1,speed)
FGDemo.οnmοuseοver=function() {clearInterval(MyMar1)}
FGDemo.οnmοuseοut=function() {MyMar1=setInterval(Marquee1,speed)
}
-->
</SCRIPT>
</DIV>
</BODY></HTML>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
