登陆

匀速循环的横向图片滚动

城南二哥 2019-09-03 669人围观 ,发现0个评论

匀速循环的横向图片滚动

 〈!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〉

AASDFERHYTJTI
请关注微信公众号
微信二维码
Powered By Z-BlogPHP