当前位置:文档之家› javascript图片滚动的代码

javascript图片滚动的代码

<!-- 指向链接图片的URL --><base href=""><div align="center" id="demo" style="overflow:hidden;height:200px;width:95px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;"><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 language="javascript" type="text/javascript"><!--var demo = document.getElementById("demo");var demo1 = document.getElementById("demo1");var demo2 = document.getElementById("demo2");var speed=10; //滚动速度值,值越大速度越慢demo2.innerHTML = demo1.innerHTML //克隆demo2为demo1function Marquee(){if(demo2.offsetTop-demo.scrollTop<=0) //当滚动至demo1与demo2交界时demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端else{demo.scrollTop++}}var MyMar = setInterval(Marquee,speed); //设置定时器demo.onmouseover = function(){clearInterval(MyMar)} //鼠标经过时清除定时器达到滚动停止的目的demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)} //鼠标移开时重设定时器--></script>二、向下的无缝循环滚动程序代码: [ 复制代码到剪贴板 ]<!-- 指向链接图片的URL --><base href=""><div align="center" id="demo" style="overflow:hidden;height:200px;width:95px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;"><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 language="javascript" type="text/javascript"><!--var demo = document.getElementById("demo");var demo1 = document.getElementById("demo1");var demo2 = document.getElementById("demo2");var speed=10; //数值越大滚动速度越慢demo2.innerHTML = demo1.innerHTML;demo.scrollTop = demo.scrollHeight;function Marquee(){if(demo1.offsetTop-demo.scrollTop>=0)demo.scrollTop+=demo2.offsetHeightelse{demo.scrollTop--}}var MyMar = setInterval(Marquee,speed);demo.onmouseover = function(){clearInterval(MyMar)}demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}--></script>三、向左的无缝循环滚动程序代码: [ 复制代码到剪贴板 ]<!-- 指向链接图片的URL --><base href=""><div align="center" id="demo" style="overflow:hidden;height:33px;width:500px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;"><table border="0" cellspacing="0" cellpadding="0"><tr><td 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"><imgsrc="images/logo/macromedia.gif"><imgsrc="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif" border="0"></td><td id="demo2">&nbsp;</td></tr></table></div><script language="javascript" type="text/javascript"><!--var demo = document.getElementById("demo");var demo1 = document.getElementById("demo1");var demo2 = document.getElementById("demo2");var speed=10; //数值越大滚动速度越慢demo2.innerHTML = demo1.innerHTMLfunction Marquee(){if(demo2.offsetWidth-demo.scrollLeft<=0)demo.scrollLeft-=demo1.offsetWidthelse{demo.scrollLeft++}}var MyMar = setInterval(Marquee,speed);demo.onmouseover = function(){clearInterval(MyMar)}demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}--></script>四、向右的无缝循环滚动程序代码: [ 复制代码到剪贴板 ]<!-- 指向链接图片的URL --><base href=""><div align="center" id="demo" style="overflow:hidden;height:33px;width:500px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;"><table border="0" cellspacing="0" cellpadding="0"><tr><td 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"><imgsrc="images/logo/macromedia.gif"><imgsrc="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif" border="0"></td><td id="demo2">&nbsp;</td></tr></table></div><script language="javascript" type="text/javascript"><!--var demo = document.getElementById("demo");var demo1 = document.getElementById("demo1");var demo2 = document.getElementById("demo2");var speed=10; //数值越大滚动速度越慢demo2.innerHTML = demo1.innerHTML;demo.scrollLeft = demo.scrollWidth;function Marquee(){if(demo.scrollLeft<=0)demo.scrollLeft+=demo2.offsetWidthelse{demo.scrollLeft--}}var MyMar = setInterval(Marquee,speed)demo.onmouseover = function(){clearInterval(MyMar)}demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}--></script>来源:/204708++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++上下綜合實例<a href="#" onmouseover="addspeed=10" onmouseout="addspeed=dafault_addspeed" >^^^^^^^^^^^^^^^^^^^^^^^^</a> <div id=demo style="overflow:hidden;height:421px;width:190px;"><div id="demo1"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr><td height="421" align="center"><table width="95%" border="0" cellspacing="7" cellpadding="0"> <tr><td align="center"><a href="main.php?action=introduce_view&id=1"><imgsrc="http://qz/upload/2008/12/101239_small.jpg" width="180" height="73" border="0" /></a></td></tr><tr><td align="center"><a href="main.php?action=introduce_view&id=2"><imgsrc="http://qz/upload/2008/12/101251_small.jpg" width="180" height="73" border="0" /></a></td></tr><tr><td align="center"><a href="main.php?action=introduce_view&id=1"><imgsrc="http://qz/upload/2008/12/101239_small.jpg" width="180" height="73" border="0" /></a></td></tr><tr><td align="center"><a href="main.php?action=introduce_view&id=2"><imgsrc="http://qz/upload/2008/12/101251_small.jpg" width="180" height="73" border="0" /></a></td></tr></table></td></tr></table></div><div id="demo2"></div></div><a href="#" onmouseover="clearInterval(MyMar);MyMar=setInterval(rightAddSpeed,spe ed)"onmouseout="clearInterval(MyMar);MyMar=setInterval(Marquee,speed)" >ⅤⅤⅤⅤⅤⅤⅤⅤⅤⅤⅤⅤ</a><script>var speed=1 ;var addspeed=1;var dafault_addspeed=1;var demo = document.getElementById("demo");var demo1 = document.getElementById("demo1");var demo2 = document.getElementById("demo2");demo2.innerHTML=demo1.innerHTML ;function Marquee(){if(demo2.offsetHeight-demo.scrollTop<=0)demo.scrollTop-=demo1.offsetHeight;else{demo.scrollTop=demo.scrollTop+addspeed;}}function rightAddSpeed(){if(demo1.offsetTop-demo.scrollTop>=0)demo.scrollTop+=demo2.offsetHeightelse{demo.scrollTop-=10;}}var MyMar=setInterval(Marquee,speed)demo.onmouseover=function() {clearInterval(MyMar)}demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}</script>=================================================+++++++++++++++左右綜合实例++++++++++++++<table width="1002" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td height="153" valign="top" background="images/pro_centerbg2.jpg"><table width="1002" height="140" border="0" cellpadding="0" cellspacing="0"><tr><td width="106" align="center" valign="top"><img src="images/jiantou_left.jpg" width="60" height="88" onmouseover="addspeed=10" onmouseout="addspeed=dafault_addspeed"/></td><td width="790" valign="top"><!----------------------------小圖展示區------------------------------------><div id=demo style="overflow:hidden;height:100px;width:790px;"><table><tr><td id="demo1" valign="top"><table width="790" height="140" border="0" cellpadding="0" cellspacing="0"> <tr><td width="131" align="center" valign="top" ><DIV class="example" style="width:130px; "><!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]--> <DIV class="bd" style="width:110px; height:74px;"><img src="images/protest1.jpg" width="110" height="74" /></DIV><!--[if lte IE 6.5]></v:rect><![endif]--></DIV></td><td width="131" align="center" valign="top" ><DIV class="example" style="width:130px; "><!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]--> <DIV class="bd" style="width:110px; height:74px;"><img src="images/protest2.jpg" width="110" height="74" /></DIV><!--[if lte IE 6.5]></v:rect><![endif]--></DIV></td><td width="131" align="center" valign="top"><DIV class="example" style="width:130px; "><!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]--> <DIV class="bd" style="width:110px; height:74px;"><img src="images/protest3.jpg" width="110" height="74" /></DIV><!--[if lte IE 6.5]></v:rect><![endif]--></DIV></td><td width="131" align="center" valign="top"><DIV class="example" style="width:130px; "><!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]--> <DIV class="bd" style="width:110px; height:74px;"><img src="images/protest4.jpg" width="110" height="74" /></DIV><!--[if lte IE 6.5]></v:rect><![endif]--></DIV></td><td width="131" align="center" valign="top"><DIV class="example" style="width:130px; "><!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]--> <DIV class="bd" style="width:110px; height:74px;"><img src="images/protest5.jpg" width="110" height="74" /></DIV><!--[if lte IE 6.5]></v:rect><![endif]--></DIV></td><td width="135" align="center" valign="top"><DIV class="example" style="width:130px; "><!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]--><DIV class="bd" style="width:110px; height:74px;"><img src="images/protest6.jpg" width="110" height="74" /></DIV><!--[if lte IE 6.5]></v:rect><![endif]--></DIV></td><td width="135" align="center" valign="top"><DIV class="example" style="width:130px; "><!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]--><DIV class="bd" style="width:110px; height:74px;"><img src="images/protest6.jpg" width="110" height="74" /></DIV><!--[if lte IE 6.5]></v:rect><![endif]--></DIV></td></tr></table></td><td valign="top" id="demo2"></td></tr></table></div><!----------------------------小圖展示區end------------------------------------></td><td width="106" align="center" valign="top"><img src="images/jiantou_right.jpg" width="60" height="88" onmouseover="clearInterval(MyMar);MyMar=setInterval(rightAddSpeed,speed)" onmouseout="clearInterval(MyMar);MyMar=setInterval(Marquee,speed)"/></td> </tr></table></td></tr></table><script>var speed=1var addspeed=1;var dafault_addspeed=1;var demo = document.getElementById("demo");var demo1 = document.getElementById("demo1");var demo2 = document.getElementById("demo2");demo2.innerHTML=demo1.innerHTMLfunction Marquee(){if(demo2.offsetWidth-demo.scrollLeft<=0)demo.scrollLeft-=demo1.offsetWidthelse{demo.scrollLeft=demo.scrollLeft+addspeed}}function rightAddSpeed(){if(demo2.offsetWidth-demo.scrollLeft>0)demo.scrollLeft+=demo1.offsetWidthelse{demo.scrollLeft=demo.scrollLeft-10}}var MyMar=setInterval(Marquee,speed)demo.onmouseover=function() {clearInterval(MyMar)}demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script>。

相关主题