连续图片滚动无间隙的页面

最新推荐文章于 2022-03-15 23:03:28 发布

weixin_33774308

最新推荐文章于 2022-03-15 23:03:28 发布

阅读量65

点赞数

原文链接：http://www.cnblogs.com/dqg/archive/2005/11/10/273259.html

版权

（1）一个不间断的滚动完整代码：

<HTML><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">

<STYLE type=text/css>TD {
FONT-SIZE: 12px
}
P {
FONT-SIZE: 12px
}
SELECT {
FONT-SIZE: 12px
}
INPUT {
FONT-SIZE: 12px
}
.l15 {
LINE-HEIGHT: 150%
}
A IMG {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px
}
.img01 {
BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid
}
.img02 {
BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; BORDER-BOTTOM: #ffffff 1px solid
}
.f14 {
FONT-SIZE: 14px
}
.f14l12 {
FONT-SIZE: 14px; LINE-HEIGHT: 120%
}
.f14l15 {
FONT-SIZE: 14px; LINE-HEIGHT: 150%
}
.f14l17 {
FONT-SIZE: 14px; LINE-HEIGHT: 170%
}
A:hover {
COLOR: #ff0000
}
A.title1 {
FONT-WEIGHT: bold; FONT-SIZE: 17px; COLOR: #000000; FONT-FAMILY: arial; TEXT-DECORATION: none
}
A.title1:hover {
FONT-WEIGHT: bold; FONT-SIZE: 17px; COLOR: #000000; FONT-FAMILY: arial; TEXT-DECORATION: none
}
A.title2:link {
COLOR: #000000; TEXT-DECORATION: none
}
A.title2:visited {
COLOR: #000000; TEXT-DECORATION: none
}
A.title2:active {
COLOR: #ff0000; TEXT-DECORATION: none
}
A.title2:hover {
COLOR: #ff0000; TEXT-DECORATION: none
}
A.sinatail:link {
FONT-SIZE: 12px; COLOR: #0000ff; TEXT-DECORATION: underline
}
A.sinatail:visited {
FONT-SIZE: 12px; COLOR: #0000ff; TEXT-DECORATION: underline
}
A.sinatail:active {
FONT-SIZE: 12px; COLOR: #ff0000; TEXT-DECORATION: underline
}
A.sinatail:hover {
FONT-SIZE: 12px; COLOR: #ff0000; TEXT-DECORATION: underline
}
.c01 {
FONT-SIZE: 11px; COLOR: #6a82cc
}
A.wa01:link {
COLOR: #ffffff; TEXT-DECORATION: none
}
A.wa01:visited {
COLOR: #ffffff; TEXT-DECORATION: none
}
A.wa01:active {
COLOR: #71fdfd; TEXT-DECORATION: none
}
A.wa01:hover {
COLOR: #71fdfd; TEXT-DECORATION: none
}
A.a01:link {
COLOR: #0043fe; TEXT-DECORATION: none
}
A.a01:visited {
COLOR: #800080; TEXT-DECORATION: none
}
A.a01:active {
COLOR: #ff0000; TEXT-DECORATION: underline
}
A.a01:hover {
COLOR: #ff0000; TEXT-DECORATION: underline
}
A.a02:link {
COLOR: #000000; TEXT-DECORATION: none
}
A.a02:visited {
COLOR: #800080; TEXT-DECORATION: none
}
A.a02:active {
COLOR: #ff0000; TEXT-DECORATION: underline
}
A.a02:hover {
COLOR: #ff0000; TEXT-DECORATION: underline
}
A.a03:link {
COLOR: #0043fe
}
A.a03:visited {
COLOR: #800080
}
A.a03:active {
COLOR: #ff0000
}
A.a03:hover {
COLOR: #ff0000
}
A.a04:link {
COLOR: #0106aa
}
A.a04:visited {
COLOR: #800080
}
A.a04:active {
COLOR: #ff0000
}
A.a04:hover {
COLOR: #ff0000
}
A.ent1:link {
FONT-SIZE: 12px; COLOR: #034b78; TEXT-DECORATION: none
}
A.ent1:visited {
FONT-SIZE: 12px; COLOR: #034b78; TEXT-DECORATION: none
}
A.ent1:active {
FONT-SIZE: 12px; COLOR: #034b78; TEXT-DECORATION: none
}
A.ent1:hover {
FONT-SIZE: 12px; COLOR: #034b78; TEXT-DECORATION: none
}
A.ent2:link {
FONT-SIZE: 12px; COLOR: #034b78; FONT-FAMILY: arial; TEXT-DECORATION: none
}
A.ent2:visited {
FONT-SIZE: 12px; COLOR: #034b78; FONT-FAMILY: arial; TEXT-DECORATION: none
}
A.ent2:active {
FONT-SIZE: 12px; COLOR: #034b78; FONT-FAMILY: arial; TEXT-DECORATION: none
}
A.ent2:hover {
FONT-SIZE: 12px; COLOR: #034b78; FONT-FAMILY: arial; TEXT-DECORATION: none
}
</STYLE>

<META content="MSHTML 6.00.3790.0" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff leftMargin=0 topMargin=0 marginwidth="0" marginheight="0">

<TABLE width=800 border=0 cellPadding=0 cellSpacing=0 bgcolor="#003399">
  <TBODY>
    <TR>
      <TD align=middle>
        <TABLE cellSpacing=0 cellPadding=0 width=800 border=0>
          <TBODY>
            <TR>
              <TD> <DIV id=demo
                  style="OVERFLOW: hidden; WIDTH: 600px; COLOR: #c04020; HEIGHT: 165px">
                  <TABLE height="94" border=0 align=left cellPadding=0 cellspace="0">
                    <TBODY>
                      <TR>
                        <TD height="92" id=demo1>
                          <TABLE width="800" height="90"
                          border=0 cellPadding=2 cellSpacing=0>
                            <TBODY>
                              <TR>
                                <TD width=0 rowspan="2"></TD>
                                <TD width="100" height="74" align="center"><A
                              href="/hotel/hotel.asp?h_name=%C8%AB%D7%DC%B9%F3%B1%F6%C2%A5"
                              target=_top><IMG
                              src=" http://www.2008trip.com/ad/hotel/move/images/qzgbl.jpg" alt="青岛汇泉王朝大酒店" width="98" height=74 border="0" class=img02></A></TD>
                                <TD width="100" align="center"><A
                              href="/hotel/hotel.asp?h_name=%C7%E0%B5%BA%B9%F3%B6%BC%B4%F3%B7%B9%B5%EA"
                              target=_top><IMG
                              src=" http://www.2008trip.com/ad/hotel/move/images/qdgdd.jpg" alt="青岛汇泉王朝大酒店" width="98" height=74 border="0" class=img02></A></TD>
                                <TD width="100" align="center"><A
                              href="/hotel/hotel.asp?h_name=%C7%E0%B5%BA%D6%D0%B8%DB%B4%F3%CF%C3"
                              target=_top><IMG
                              src=" http://www.2008trip.com/ad/hotel/move/images/zgds.jpg" alt="青岛东晖国际大酒店(原华美达酒店)" width="98" height=74 border="0" class=img02></A></TD>
                                <TD width="100" align="center"><a
                              href="/hotel/hotel.asp?h_name=%C7%E0%B5%BA%BB%AA%C4%DC%B1%F6%B9%DD"
                              target=_top><img
                              src=" http://www.2008trip.com/ad/hotel/move/images/hnbg.jpg" alt="青岛丽晶大酒店" width="100" height=74 border="0" class=img02></a></TD>
                                <TD width="100" align="center"><A
                              href="/hotel/hotel.asp?h_name=%C7%E0%B5%BA%CF%E3%E9%BF%C0%F6%C9%E1%C9%CC%CE%F1%BE%C6%B5%EA"
                              target=_blank><IMG
                              src=" http://www.2008trip.com/ad/hotel/move/images/xxls.jpg" alt="青岛饭店" width="100" height=74 border="0" class=img02></A></TD>
                                <TD width="100" align="center"><A
                              href="/hotel/hotel.asp?h_name=%C7%E0%B5%BA%B6%AB%B7%BD%B7%B9%B5%EA"
                              target=_top><IMG
                              src=" http://www.2008trip.com/ad/hotel/move/images/dffd.jpg" alt="青岛香格里拉大饭店" width="98" height=74 border="0" class=img02></A></TD>
                                <TD width="100" align="center"><A
                              href="/hotel/hotel.asp?h_name=%C7%E0%B5%BA%BB%B7%B5%BA%B4%F3%BE%C6%B5%EA"
                              target=_blank><IMG
                              src=" http://www.2008trip.com/ad/hotel/move/images/hddjd.jpg" alt="青岛泛海名人酒店" width="98" height=74 border="0" class=img02></A></TD>
                                <TD width="100" align="center"><A
                              href="/hotel/hotel.asp?h_name=%C7%E0%B5%BA%B1%B1%BA%A3%B1%F6%B9%DD"
                              target=_blank><IMG
                              src=" http://www.2008trip.com/ad/hotel/move/images/bhbg.jpg" alt="青岛泛海名人酒店" width="98" height=75 border="0" class=img02></A></TD>
                                <TD width=0 rowspan="2"></TD>
                              </TR>
                              <TR>
                                <TD height="16" align="center"><a href="/hotel/hotel.asp?h_name=%C8%AB%D7%DC%B9%F3%B1%F6%C2%A5"><font color="#FFFFFF">全总贵宾楼</font></a></TD>
                                <TD align="center"><a href="/hotel/hotel.asp?h_name=%C7%E0%B5%BA%B9%F3%B6%BC%B4%F3%B7%B9%B5%EA"><font color="#FFFFFF">青岛贵都大饭店</font></a></TD>
                                <TD align="center"><a href="/hotel/hotel.asp?h_name=%C7%E0%B5%BA%D6%D0%B8%DB%B4%F3%CF%C3"><font color="#FFFFFF">青岛中港大厦</font></a></TD>
                                <TD align="center"><a href="/hotel/hotel.asp?h_name=%C7%E0%B5%BA%BB%AA%C4%DC%B1%F6%B9%DD"><font color="#FFFFFF">青岛华能宾馆</font></a></TD>
                                <TD align="center"><a href="/hotel/hotel.asp?h_name=%C7%E0%B5%BA%CF%E3%E9%BF%C0%F6%C9%E1%C9%CC%CE%F1%BE%C6%B5%EA"><font color="#FFFFFF">香榭丽舍商务酒店</font></a></TD>
                                <TD align="center"><a href="/hotel/hotel.asp?h_name=%C7%E0%B5%BA%B6%AB%B7%BD%B7%B9%B5%EA"><font color="#FFFFFF">青岛东方饭店</font></a></TD>
                                <TD align="center"><a href="/hotel/hotel.asp?h_name=%C7%E0%B5%BA%BB%B7%B5%BA%B4%F3%BE%C6%B5%EA"><font color="#FFFFFF">青岛环岛大酒店</font></a></TD>
                                <TD align="center"><a href="/hotel/hotel.asp?h_name=%C7%E0%B5%BA%B1%B1%BA%A3%B1%F6%B9%DD"><font color="#FFFFFF">青岛北海宾馆</font></a></TD>
                              </TR>
                            </TBODY>
                          </TABLE></TD>
                        <TD id=demo2 width=1></TD>
                      </TR>
                    </TBODY>
                  </TABLE>
                </DIV>
                <SCRIPT>
  var speed=15//速度数值越大速度越慢
  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.οnmοuseοver=function() {clearInterval(MyMar)}
  demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
  </SCRIPT> </TD>
            </TR>
          </TBODY>
        </TABLE></TD>
    </TR>
  </TBODY>
</TABLE>

</BODY></HTML>

（2）向上滚动的效果：

<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.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>

（3）向下滚动的效果：
将上面“制作向上滚动的效果”中的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.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>

（4）向左滚动的效果：
<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.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>

（5）向右滚动的效果：
将上面“制作向左滚动的效果”中的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.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>

（5）代码的巧用：
在屏幕滚动到另一方的劲头，立即反方向滚动，重复这个效果，让滚动的屏幕不会出现空屏的不舒服感。
<MARQUEE οnmοuseοver=this.stop() οnmοuseοut=this.start() scrollAmount=5 behavior=alternate width="100%" height=127>
内容
</MARQUEE>

转载于:https://www.cnblogs.com/dqg/archive/2005/11/10/273259.html

weixin_33774308

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
连续图片滚动无间隙的页面

（1）一个不间断的滚动完整代码：<HTML><HEAD><TITLE></TITLE><METAhttp-equiv=Content-Typecontent="text/html;charset=gb2312"><STYLEtype=text/css>TD{FONT-SIZE:12px}P{FONT-SIZE...
复制链接

扫一扫