圖片滾動代碼

zoukankan html css js c++ java

圖片滾動代碼

<div id=demo

style=overflow:hidden;height:150;90;background:#214984;color:#ffffff>
<div id=demo1>
圖片在這里

</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>
///////////////////////////////////////////////////////////////////
有什么问题请到<a href='/bbs/forums.php?fid=21'>论坛</a>中发表<br>




<SCRIPT>
// more javascript from http://www.webjx.com

// URLs of slides
var slideurl=new Array

("/img/200406301.jpg","/img/200406302.jpg","/img/200406303.jpg","/img/20040

6304.jpg")

// comments displayed below the slides
var slidecomment=new Array("Mary","Jane","Rita","Tina")

// links for each slide
var slidelink=new Array

("http://www.webjx.com","http://www.webjx.com","http://www.webjx.com","http

://www.webjx.com")

// targets of the links. Allowed values: "_parent", "_top", "_blank",

"_self"
var slidetarget=new Array("_blank","_blank","_blank","_blank")

// the width of the slideshow (pixels)
var scrollerwidth=160

// the height of the slideshow (pixels)
var scrollerheight=100

// width of the transparent zones (pixels)
var translayerszone=40

// font-attributes for the comments
var slidefont="Arial"
var slidefontcolor="blue"
var slidefontsize="2"

// background-color of webpage
var pagebgcolor="#FFFFFF"

// do not edit below this line
var translayerswidth=1
var translayersmax=Math.floor(translayerszone/translayerswidth)
var translayersleftpos=0
var translayersopacity=100
var translayersfactor=100/translayersmax
var translayerswidthall=translayersmax*translayerswidth
var allpicturewidth
var distancepictopic=0
var scrollerleft=0
var scrollertop=0
var pause=20
var step=2
var newstep=step
var clipleft,clipright,cliptop,clipbottom
var i_picture=0
var timer
var picturecontent=""
var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0
var ie=document.all?1:0
var browserinfos=navigator.userAgent
var opera=browserinfos.match(/Opera/)

var preloadedimages=new Array()
for (i=0;i<slideurl.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=slideurl[i]
}

function init() {
    if (ie) {
  allpicturewidth=document.all.picturediv.offsetWidth
  document.all.picturediv.style.posTop=scrollertop
        document.all.picturediv.style.posLeft=scrollerleft+scrollerwidth
  clipleft=0
  clipright=0
  cliptop=0
  clipbottom=scrollerheight
  document.all.picturediv.style.clip ="rect("+cliptop+"

"+clipright+" "+clipbottom+" "+clipleft+")"
  document.all.picturediv.style.visibility="visible"
  scrollpicture()

    }
if (ns6) {
  allpicturewidth=document.getElementById

('emptypicturediv').offsetWidth
  document.getElementById('picturediv').style.top=scrollertop
        document.getElementById

('picturediv').style.left=scrollerleft+scrollerwidth
  clipleft=0
  clipright=0
  cliptop=0
  clipbottom=scrollerheight
  document.getElementById('picturediv').style.clip ="rect

("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
  document.getElementById

('picturediv').style.visibility="visible"
  scrollpicture()
    }
if (ns4) {


allpicturewidth=document.roof.document.picturediv.document.width
  document.roof.document.picturediv.top=scrollertop


document.roof.document.picturediv.left=scrollerleft+scrollerwidth
  document.roof.document.picturediv.clip.left=0
  document.roof.document.picturediv.clip.right=0
  document.roof.document.picturediv.clip.top=0


document.roof.document.picturediv.clip.bottom=scrollerheight
  document.roof.document.picturediv.visibility="visible"
        scrollpicture()
    }
}

function scrollpicture() {
    if (ie) {
  if (document.all.picturediv.style.posLeft>=scrollerleft-

allpicturewidth) {
   document.all.picturediv.style.posLeft-=step
   clipright+=step
   if (clipright>scrollerwidth) {
    clipleft+=step
   }
   document.all.picturediv.style.clip ="rect

("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
   var timer=setTimeout("scrollpicture()",pause)
  }
  else {
   resetposition()
  }
}
if (ns6) {
  if (parseInt(document.getElementById

('picturediv').style.left)>=scrollerleft-allpicturewidth) {
document.getElementById('picturediv').style.left=parseInt

(document.getElementById('picturediv').style.left)-step
   clipright+=step
   if (clipright>scrollerwidth) {
    clipleft+=step
   }
   document.getElementById('picturediv').style.clip

="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
   var timer=setTimeout("scrollpicture()",pause)
  }
  else {
   resetposition()
  }
}
   if (ns4) {
  if (document.roof.document.picturediv.left>=scrollerleft-

allpicturewidth) {
   document.roof.document.picturediv.left-=step
   document.roof.document.picturediv.clip.right+=step
   if

(document.roof.document.picturediv.clip.right>scrollerwidth) {


document.roof.document.picturediv.clip.left+=step
   }
   var timer=setTimeout("scrollpicture()",pause)
  }
  else {
   resetposition()
  }
}
}

function onmsover() {
step=0
}
function onmsout() {
step=newstep
}

function resetposition() {
if (ie) {
        document.all.picturediv.style.posLeft=scrollerleft+scrollerwidth
  clipleft=0
  clipright=0
  document.all.picturediv.style.clip ="rect("+cliptop+"

"+clipright+" "+clipbottom+" "+clipleft+")"
        scrollpicture()
}
if (ns6) {
  allpicturewidth=document.getElementById

('emptypicturediv').offsetWidth
        document.getElementById

('picturediv').style.left=scrollerleft+scrollerwidth
  clipleft=0
  clipright=0
  document.getElementById('picturediv').style.clip ="rect

("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
        scrollpicture()
}
if (ns4) {


document.roof.document.picturediv.left=scrollerleft+scrollerwidth
  document.roof.document.picturediv.clip.left=0
  document.roof.document.picturediv.clip.right=0
        scrollpicture()
}
}

picturecontent=""
picturecontent+="<table cellpadding=2 cellspacing=0>"
picturecontent+="<tr>"
for (i=0;i<=slideurl.length-1;i++) {
picturecontent+="<td>"
picturecontent+="<a href=\""+slidelink[i]+"\"

target=\""+slidetarget[i]+"\" onMouseOver=\"javascript:onmsover()\"

onMouseOut=\"javascript:onmsout()\">"
picturecontent+="<img src=\""+slideurl[i]+"\" border=0></a>"
picturecontent+="</td>"
}
picturecontent+="</tr>"
picturecontent+="<tr>"
for (i=0;i<=slideurl.length-1;i++) {
picturecontent+="<td>"
picturecontent+="<font face=\""+slidefont+"\"

color=\""+slidefontcolor+"\" size="+slidefontsize+">"
picturecontent+=slidecomment[i]
picturecontent+="</font>"
picturecontent+="</td>"
}
picturecontent+="</tr>"
picturecontent+="</tr></table>"

if (ie || ns6) {
document.write('<div

style="position:relative;'+scrollerwidth+'px;height:'+scrollerheight+

'px;overflow:hidden">')
document.write('<div id="picturediv"

style="position:absolute;top:0px;left:0px;height:'+scrollerheight+'px;visib

ility:hidden">'+picturecontent+'</div>')
if (ie && !opera) {
  for (i=0;i<=translayersmax;i++) {
  document.write('<span ID="trans'+i+'"

style="position:absolute;top:0px;left:'+translayersleftpos+'px;'+tran

slayerswidth+'px;height:'+scrollerheight+'px;background-

color:'+pagebgcolor+';filter:alpha

(opacity='+translayersopacity+');overflow:hidden"> </span>')
  translayersleftpos+=translayerswidth
  translayersopacity-=translayersfactor
  }
  translayersleftpos=scrollerwidth-translayersleftpos
  for (ii=0;ii<=translayersmax;ii++) {
  document.write('<span ID="trans'+ii+'"

style="position:absolute;top:0px;left:'+translayersleftpos+'px;'+tran

slayerswidth+'px;height:'+scrollerheight+'px;background-

color:'+pagebgcolor+';filter:alpha

(opacity='+translayersopacity+');overflow:hidden"> </span>')
  translayersleftpos+=translayerswidth
  translayersopacity+=translayersfactor
  }
}
if (ns6 && !opera) {
  for (i=0;i<=translayersmax-1;i++) {
  document.write('<span ID="transleft'+i+'"

style="position:absolute;top:0px;left:'+translayersleftpos+'px;'+tran

slayerswidth+'px;height:'+scrollerheight+'px;background-

color:'+pagebgcolor+';-moz-

opacity:'+translayersopacity/100+';overflow:hidden"> </span>')
  translayersleftpos+=translayerswidth
  translayersopacity-=translayersfactor
  if (translayersopacity<0) {translayersopacity=0.001}
  }
  translayersleftpos=scrollerwidth-translayersleftpos
  translayersopacity=0.001
  for (i=0;i<=translayersmax-1;i++) {
  document.write('<span ID="transright'+i+'"

style="position:absolute;top:0px;left:'+translayersleftpos+'px;'+tran

slayerswidth+'px;height:'+scrollerheight+'px;background-

color:'+pagebgcolor+';-moz-opacity:'+translayersopacity/100+';"> </span>')
  translayersleftpos+=translayerswidth
  translayersopacity+=translayersfactor
  }
}
document.write('</div>')
document.write('<div id="emptypicturediv"

style="position:absolute;top:0px;left:0px;height:'+scrollerheight+'px;visib

ility:hidden">'+picturecontent+'</div>')

window.onload=init
}

if (ns4) {
document.write('<ilayer name="roof" width='+scrollerwidth+'

height='+scrollerheight+'>')
document.write('<layer name="picturediv" width='+scrollerwidth+'

height='+scrollerheight+' visibility=hide>'+picturecontent+'</layer>')
document.write('</ilayer>')
window.onload=init
}
</script>
////////////////////////////////////////////////////////////////////////
感谢彩云南萌芽邪恶 coolbeela提供的原帖。
http://bbs.powereasy.net/dispbbs.asp?BoardID=47&ID=130934

一、向左滚动

1、调用“图片”栏目图片的向左滚动代码（效果演示）
以下是最新图片标签说明。

以下是首页模板最新图片部分代码

以下是引用片段：
-----------------------------------
〈tr〉
〈td class=main_title_575〉〈B〉最新图片〈/B〉〈/td〉
〈/tr〉
〈tr〉
〈td class=main_tdbg_575 valign=middle align=center height=131〉
〈!--{$GetPicPhoto(3,0,True,0,4,False,False,0,1,1,130,90,20,0,True,4)}--

〉〈/td〉
〈/tr〉
------------------------------------
用以下是滚动代码代替上面红色的标签部分，注意红色部分的变化。
------------------------------------
〈!--滚动代码开始--〉
〈div id=demo style="OVERFLOW: hidden; WIDTH: 560px; HEIGHT: 120px"〉
〈table cellPadding=0 align=left border=0 cellspace="0"〉
   〈tr〉
     〈td id=demo11 vAlign=top〉
      〈!--{$GetPicPhoto

(3,0,True,0,12,False,False,0,1,1,130,90,20,0,True,12)}--〉〈/td〉
     〈td id=demo12 vAlign=top〉〈/td〉
   〈/tr〉
〈/table〉
〈/div〉
〈SCRIPT〉
var speed=15
demo12.innerHTML=demo11.innerHTML
function Marquee11(){
if(demo12.offsetWidth-demo.scrollLeft〈=0)
demo.scrollLeft-=demo11.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee11,speed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee11,speed)}
〈/SCRIPT〉
〈!--滚动代码结束--〉
-----------------------------------
2、文章频道图片向左滚动代码（效果演示）
以下是文章频道模板最新图片部分代码
-----------------------------------
〈tr〉
〈td Class="main_title_575"〉〈b〉最新图片{$ChannelShortName}〈/b〉〈/td

〉
〈/tr〉
〈tr〉
   〈td Class="main_tdbg_575"〉 {$GetPicArticle

(ChannelID,0,True,0,4,false,false,0,3,2,130,90,20,0,True,4)} 〈/td〉
〈/tr〉
〈tr〉
   〈td Class="main_shadow"〉〈/td〉
〈/tr〉
------------------------------------
用以下是滚动代码代替上面红色的标签，注意红色部分的变化。红色数字代表了滚动

图片的总数（这里为8张）。
----------------------------------
〈!--滚动代码开始--〉
〈div id=demo style="OVERFLOW: hidden; WIDTH: 560px; HEIGHT: 120px"〉
〈table cellPadding=0 align=left border=0 cellspace="0"〉
   〈tr〉
    〈td id=demo11 vAlign=top〉
      〈!--{$GetPicArticle

(ChannelID,0,True,0,8,false,false,0,3,2,130,90,20,0,True,8)}--〉〈/td〉
    〈td id=demo12 vAlign=top〉〈/td〉
   〈/tr〉
〈/table〉
〈/div〉
〈SCRIPT〉
var speed=15
demo12.innerHTML=demo11.innerHTML
function Marquee11(){
if(demo12.offsetWidth-demo.scrollLeft〈=0)
demo.scrollLeft-=demo11.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee11,speed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee11,speed)}
〈/SCRIPT〉
〈!--滚动代码结束--〉
-----------------------------------
3、下载频道图片向左滚动代码（效果演示）
以下是下载频道模板推荐下载图片部分代码
-----------------------------------
〈tr〉
〈td Class="main_title_575"〉〈table width="100%" border="0"

cellspacing="0" cellpadding="0"〉
    〈tr〉
      〈td〉〈b〉〈a class=’Class’ href="{$InstallDir}

{$ChannelDir}/ShowElite.asp"〉推荐下载(图)〈/a〉〈/b〉〈/td〉
      〈td align="right"〉{$RssElite}〈/td〉
    〈/tr〉
    〈/table〉〈/td〉
    〈/tr〉
〈tr〉
〈td align="center" Class="main_tdbg_575"〉 {$GetPicSoft

(ChannelID,0,True,0,4,false,True,0,3,2,130,90,20,0,True,4)} 〈/td〉
〈/tr〉
------------------------------------
用以下是滚动代码代替上面红色的标签，注意红色部分的变化。红色数字代表了滚动

图片的总数（这里为12张）。
------------------------------------
〈!--滚动代码开始--〉
〈div id=demo style="OVERFLOW: hidden; WIDTH: 560px; HEIGHT: 120px"〉
〈table cellPadding=0 align=left border=0 cellspace="0"〉
    〈tr〉
      〈td id=demo11 vAlign=top〉
       〈!--{$GetPicSoft

(ChannelID,0,True,0,12,false,True,0,3,2,130,90,20,0,True,12)}--〉〈/td〉
      〈td id=demo12 vAlign=top〉〈/td〉
    〈/tr〉
〈/table〉
〈/div〉
〈SCRIPT〉
var speed=15
demo12.innerHTML=demo11.innerHTML
function Marquee11(){
if(demo12.offsetWidth-demo.scrollLeft〈=0)
demo.scrollLeft-=demo11.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee11,speed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee11,speed)}
〈/SCRIPT〉
〈!--滚动代码结束--〉
------------------------------
从以上可以看出，滚动图片代码基本上是相同的，不同的是调用图片的标签变了。
------------------------------
二、向上滚动
向上滚动代码使用方法同上左滚动代码，这里只给出代码，不再说明。
以下是文章频道图片调用的滚动代码。
-----------------------------------------------------------
〈!--向上滚动代码开始--〉
〈DIV id=rolllink style="OVERFLOW: hidden; WIDTH: 160px; HEIGHT: 360px"〉
〈DIV id=rolllink1〉
    〈TABLE cellSpacing=5 width="100%"〉
      〈tr〉
       〈td id=demo11 vAlign=top〉
         〈!--{$GetPicArticle

(0,0,True,0,6,false,false,0,3,2,160,100,20,0,True,1)}--〉〈/td〉
       〈td id=demo12 vAlign=top〉〈/td〉
      〈/tr〉
    〈/TABLE〉
〈/DIV〉
〈DIV id=rolllink2〉〈/DIV〉
〈/DIV〉
〈SCRIPT〉
var rollspeed=40
rolllink2.innerHTML=rolllink1.innerHTML
function Marquee(){
if(rolllink2.offsetTop-rolllink.scrollTop〈=0)
rolllink.scrollTop-=rolllink1.offsetHeight
else{
rolllink.scrollTop++
}
}
var MyMar=setInterval(Marquee,rollspeed)
rolllink.onmouseover=function() {clearInterval(MyMar)}
rolllink.onmouseout=function() {MyMar=setInterval(Marquee,rollspeed)}
〈/SCRIPT〉
〈!--向上滚动代码结束--〉
-----------------------------------------------------------
以下是图片频道的3行4列向上滚动代码摘录：（效果演示）
………………………
〈tr〉
          〈td colspan="3" Class="main_title_575"〉〈a class="Class"

href="{$InstallDir}{$ChannelDir}/ShowNew.asp"〉〈b〉最新{$ChannelShortName}

〈/b〉〈/a〉〈/td〉
        〈/tr〉
        〈tr valign="top"〉
          〈td colspan="3"〉〈table width="100%" border="0"

cellspacing="0" cellpadding="0" Class="main_tdbg_575"〉
〈tr〉
    〈td height="200" valign="top"〉
〈!--向上滚动代码开始--〉
〈DIV id=rolllink style="OVERFLOW: hidden; WIDTH: 575px; HEIGHT: 365px"〉
〈DIV id=rolllink1〉
    〈TABLE cellSpacing=5 width="100%"〉
      〈tr〉
       〈td id=demo11 vAlign=top〉
         〈!--{$GetPicPhoto

(ChannelID,0,True,0,24,False,False,0,1,1,130,90,20,0,True, 4)}--〉〈/td〉
       〈td id=demo12 vAlign=top〉〈/td〉
      〈/tr〉
    〈/TABLE〉
〈/DIV〉
〈DIV id=rolllink2〉〈/DIV〉
〈/DIV〉
〈SCRIPT〉
var rollspeed=40
rolllink2.innerHTML=rolllink1.innerHTML
function Marquee(){
if(rolllink2.offsetTop-rolllink.scrollTop〈=0)
rolllink.scrollTop-=rolllink1.offsetHeight
else{
rolllink.scrollTop++
}
}
var MyMar=setInterval(Marquee,rollspeed)
rolllink.onmouseover=function() {clearInterval(MyMar)}
rolllink.onmouseout=function() {MyMar=setInterval(Marquee,rollspeed)}
〈/SCRIPT〉
〈!--向上滚动代码结束--〉
〈/td〉
〈/tr〉
〈/table〉
          〈/td〉
        〈/tr〉
        〈tr〉
          〈td colspan="3" Class="main_shadow"〉〈/td〉
        〈/tr〉
…………………………
三、向右滚动
--------------------------------------
〈!--向右滚动代码开始--〉
〈div id=demo style=overflow:hidden;height:120;560;〉
〈table align=left cellpadding=0 cellspace=0 border=0〉
〈tr〉
   〈td id=demo1 valign=top〉〈!--{$GetPicPhoto

(3,0,True,0,12,False,False,0,1,1,130,90,20,0,True,12)}--〉〈/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〉
〈!--向右滚动代码结束--〉
-------------------------------------
注意滚动图片数不要太大，这会影响页面下载速度。
//////////////////////////////////////////////////////

<div id="demo" style="overflow:hidden;height:210;560;color:#ffffff">
                <table align="left" cellpadding="0" cellspace="0"

border="0">
                  <tr>
                    <td id="demo1" valign="top"><table border="0"

cellpadding="0" cellspacing="0">
                        <tr>
                          <td><img src="indexgd/001.gif" width="143"

height="200" /></td>
                          <td><img src="indexgd/002.gif" width="143"

height="200" /></td>
                          <td><img src="indexgd/003.gif" width="143"

height="200" /></td>
                          <td><img src="indexgd/004.gif" width="143"

height="200" /></td>
                          <td><img src="indexgd/005.gif" width="143"

height="200" /></td>
                          <td><img src="indexgd/006.gif" width="143"

height="200" /></td>
                          <td><img src="indexgd/007.gif" width="143"

height="200" /></td>
                          <td><img src="indexgd/008.gif" width="143"

height="200" /></td>
                        </tr>
                    </table></td>
                    <td id="demo2" valign="top"></td>
                  </tr>
                </table>
              </div>
                <script>
var speed=8//速度数值越大速度越慢
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="BACKGROUND: #ffffff; OVERFLOW: hidden; WIDTH: 150px;

COLOR: #0000ff; HEIGHT: 500px">
<DIV id=demo1>
<div align="center">
/<A href="http://www.google.com" target=_blank><IMG

src="http://127.0.0.1/UploadFiles/2005-12/20051211532359.jpg"

border=0></A><br>
<A href="http://www.google.com" target=_blank><IMG

src="http://127.0.0.1/UploadFiles/2005-11/2005113093040254.jpg"

border=0></A><br>
<A href="http://www.google.com" target=_blank><IMG

src="http://127.0.0.1/UploadFiles/2005-11/2005113093040254.jpg"

border=0></A><br>

</div>
</DIV>
<DIV id=demo2></DIV>
</DIV>
<SCRIPT language="javascript">
var speed=10;
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>
/////////////////////////////////////////////////////////////////////

<HTML><HEAD><TITLE>µL¼ÐÃD¤åÀÉ</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2800.1264" name=GENERATOR>
<link href="css/css.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY leftMargin=0 topMargin=2 marginheight="0" marginwidth="0">
<CENTER>
<TABLE
style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid;

BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid"
cellSpacing=0 cellPadding=0 width=750 align=center border=0>
<TBODY>
<TR>
    <TD>
      <DIV id=demo style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff">
      <TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
        <TBODY>
        <TR>
          <TD id=demo1 vAlign=top><table width="1710" height="116"

border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td width="171" background="images/pic_bg.jpg"><div

align="center"> </div></td>
              <td width="171" background="images/pic_bg.jpg"><div

align="center">¨¦</div></td>
              <td width="171" background="images/pic_bg.jpg"><div

align="center">°Ê</div></td>
              <td width="171" background="images/pic_bg.jpg"><div

align="center">¤O</div></td>
              <td width="171" background="images/pic_bg.jpg"><div

align="center">¾Ç</div></td>
              <td width="171" background="images/pic_bg.jpg"><div

align="center">°|</div></td>
              <td width="171" background="images/pic_bg.jpg"><div

align="center">µø</div></td>
              <td width="171" background="images/pic_bg.jpg"><div

align="center">ÀW</div></td>
              <td width="171" background="images/pic_bg.jpg"><div

align="center">±Ð</div></td>
              <td width="171" background="images/pic_bg.jpg"><div

align="center">µ{</div></td>
            </tr>
          </table></TD>
          <TD id=demo2 vAlign=top> </TD></TR></TBODY></TABLE></DIV>
      <SCRIPT>
var speed3=25//³t«×¼ÆÈ¶V¤j³t«×¶VºC
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
</SCRIPT>
    </TD></TR></TBODY></TABLE></TD></TR></TABLE>
</CENTER>
</BODY></HTML>
//////////////////////////////////////////////////////
http://www.google.com/search?q=%E5%9C%96%E7%89%87%E6%BB%BE%E5%8B%95%E4%BB%A3%E7%A2%BC&hl=zh-TW&newwindow=1&start=0&sa=N
/////////////
下面這個例子不錯
http://www.enet.com.cn/eschool/zhuanti/adpub/05/index.htm

申明

非源创博文中的内容均收集自网上，若有侵权之处，请及时联络，我会在第一时间内删除．再次说声抱歉!!!

博文欢迎转载，但请给出原文连接。

查看全文

相关阅读:
jqueryuidatepicker 可控制是否显示时分秒
 JQuery zTree v3.2和demo
模拟网易163写的一个文本框触发效果
 不刷新页面，切换CSS文件
 Devs开源规则引擎介绍
 坑爹啊！！！win2003 x64企业版不支持tfs2010的源代码管理服务
 gui设计禁忌2.0读书笔记
 c#关于数据库自定义类型在存储过程中返回服务器端的问题
 vs2010 sp1在win2003不能安装的问题
 mysql真是不错！

原文地址：https://www.cnblogs.com/Athrun/p/1021099.html