匀速循环的横向图片滚动
〈!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"〉 〈html xmlns="http://www.w3.org/1999/xhtml"〉 〈head〉 〈meta http-equiv="Content-Type" content="text/html; charset=utf-8" /〉 〈title〉Js封闭匀速的横向图片滚动 〈/title〉 〈style〉 〈!--#film{ border:#39C 1px dashed}#film a{ float:left; margin-right:3px; border:#CCC 3px solid;}#film img{ border:none}--〉 〈/style〉 〈script type="text/&#106avascript"〉 〈!--function Na(){ this.shw={ Id:0,Imgs:"",Links:"",aTarget:"_blank",bgColor:"#ffffff",Width:0,Height:0,imgWidth:"auto",imgHeight:"auto",moveSpeed:0,$:function(id){return document.getElementById(id);}, startMove:function(){ if(this.Id==0||this.Width==0||this.Height==0){alert("请检查参数是否设置完全!");return "";} document.write(" 〈div id=\"msg\"〉 〈/div〉 〈div style=\"float:left;overflow:hidden;width:"+this.Width+"px;height:"+this.Height+"px;overflow:hidden;\" id=\""+this.Id+"\"〉 〈div style=\"float:left;width:800#;\"〉 〈div style=\"float:left;\" id=\"NaNaTemp\"〉 〈/div〉 〈div style=\"float:left;\" id=\"NaNaTemp2\"〉 〈/div〉 〈/div〉 〈/div〉"); var imgs=this.Imgs.split("@"); for(var i=0;i 〈imgs.length;i++){ this.$("NaNaTemp2").innerHTML+=" 〈a href=\"#\"〉 〈img style=\"width:"+this.imgWidth+"px;height:"+this.imgHeight+"px\" src=\""+imgs[i]+"\" /〉 〈/a〉"; } var links=this.Links.split("@"); var fCount=(imgs.length〉links.length)?links.length:imgs.length; for(var i=0;i 〈fCount;i++){ var o=this.$("NaNaTemp2").getElementsByTagName("a"); o[i].href=links[i]; o[i].target=this.aTarget; } var d1=this.$(this.Id); var d2=this.$("NaNaTemp"); var d3=this.$("NaNaTemp2"); var speed=this.moveSpeed; function moves(){ d2.innerHTML=d3.innerHTML; if(d3.offsetWidth-d1.scrollLeft 〈=0){ d1.scrollLeft=d1.scrollLeft-d2.offsetWidth; } else{ d1.scrollLeft=d1.scrollLeft+1; } } var MyMar=setInterval(moves,speed); d1.onmouseover=function() {clearInterval(MyMar)}; d1.onmouseout=function() {MyMar=setInterval(moves,speed)}; } //--------------------- } }--〉 〈/script〉 〈/head〉 〈body text="#99CC00"〉 〈script〉 var myNa=new Na(); myNa.shw.Id="film"; //必须为要生成的标签指定一个ID,同时也方便你在css样式表中设置样式 myNa.shw.bgColor="#000000";//背景颜色 myNa.shw.Width=600;//DIV的宽度 myNa.shw.Height=260; //DIV的高度 //myNa.shw.imgWidth=120; //图片的宽度 myNa.shw.imgHeight=250;//图片的高度 myNa.shw.moveSpeed=10;//滚动速度 myNa.shw.Links="#@#@#@http://www..net@#@#";//图片链接地址,以@隔开 myNa.shw.Imgs="/jscss/demoimg/wall_s1.jpg@/jscss/demoimg/wall_s2.jpg@/jscss/demoimg/wall_s3.jpg@/jscss/demoimg/wall_s4.jpg@/jscss/demoimg/wall_s5.jpg"; //图片地址,多个以@隔开 myNa.shw.startMove(); //启动播放 〈/script〉 〈/body〉 〈/html〉
AAGFHJTYJUTI版权声明
本文仅代表作者观点,不代表本站立场。
发布的有些文章部分内容来源于互联网。如有侵权,请联系我们,我们会尽快删除。
- 上一篇: 谈内页优化对网站权重提升的重要性
- 下一篇: asp图片加水印 asp程序怎么实现上传图片加水印
发表评论