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