教程集 > 脚本编程 > javascript > 正文 js图片滚动效果代码

js图片滚动效果代码

发布时间：2017-03-30 编辑：jiaochengji.com

教程集为您提供js图片滚动效果代码等资源，欢迎您收藏本站，我们将为您提供最新的js图片滚动效果代码资源

为你专业提供一款js图片滚动效果代码哦，这是一款可连续不间滚动的广告代码。

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>js图片滚动效果代码</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> a{color:#333333;background:none;text-decoration:none;font:12px 宋体;} img{border:none;margin:0px;} #outer{border:1px solid #CCCCCC;height:172px;width:585px;background:#990000;position:relative;padding-top:10px;overflow:hidden;} #left{width:40px;display:block;float:left;height:162px;position:absolute;left:10px;z-index:2;opacity:0.05;filter:alpha(opacity=5);overflow:hidden;} #right{width:40px;display:block;float:left;height:162px;position:absolute;left:535px;z-index:2;overflow:hidden;opacity:0.05;filter:alpha(opacity=5);} #demo{overflow:hidden;width:565px;height:162px;float:left;margin:0 10px;position:absolute;z-index:0;} .listname{height:156px;display:block;line-height:27px;text-align:center;padding:0 3px;border-left:1px solid #990000;border-right:1px solid #990000;} .listimage{width:150px;height:130px;} </style> <script type="text/javascript" language="javascript"> window.onload=function(){ function getElement(id){ return document.getElementById(id); } var speed=30 var demo=getElement("demo"); var demo2=getElement("demo2"); var demo1=getElement("demo1"); demo2.innerHTML=demo1.innerHTML//复制demo1中的图片到demo2中 function Marqueeleft(){//向左滚动 if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidth else demo.scrollLeft } function Marqueeright(){//向右滚动 if(demo2.offsetWidth-demo.scrollLeft>=565) demo.scrollLeft =demo1.offsetWidth else demo.scrollLeft-- } var MyMar=setInterval(Marqueeleft,speed)//自动开始滚动 Direction='Left';//设定初始方向为向左滚 demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() { if(Direction=='Left'){ MyMar=setInterval(Marqueeleft,speed) }else if(Direction=='Right'){ MyMar=setInterval(Marqueeright,speed) } }; getElement('left').onclick=function(){ clearInterval(MyMar); MyMar=setInterval(Marqueeleft,speed) Direction='Left'; }; getElement('left').onmouseover=function(){ this.style.opacity=0.3; this.style.filter='alpha(opacity=30)'; } getElement('left').onmouseout=function(){ this.style.opacity=0.05; this.style.filter='alpha(opacity=5)'; } getElement('right').onclick=function(){ clearInterval(MyMar); MyMar=setInterval(Marqueeright,speed) Direction='Right'; }; getElement('right').onmouseover=function(){ this.style.opacity=0.3; this.style.filter='alpha(opacity=30)'; } getElement('right').onmouseout=function(){ this.style.opacity=0.05; this.style.filter='alpha(opacity=5)'; } } </script> </head> <body>