起点SEO
欢迎光临起点SEO网站定向推广服务,专注于网站建设、网站优化推广 | 收藏本站 | 繁體转换 | ENGLISH
上海网站建设、上海网站优化、上海seo咨询电话:15800568690
匀速循环的横向图片滚动
网站首页 - 新闻中心 - 匀速循环的横向图片滚动

匀速循环的横向图片滚动


日期:2012-10-4 0:16:03 浏览: 次 来源: 网络转载
$pic$

匀速循环的横向图片滚动

图片

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

关闭页面】【返回首页

网站新闻

行业资讯

建站知识

友情链接 - 在线留言 - 网站地图 - RSS订阅 - - 全站搜索

版权所有:www.qidianseo.net

关键词:上海SEO上海网站推广上海网站建设上海网站优化