您的位置:HBcms宏博内容管理系统 建站经验 正文
 添加时间:2007-08-25 原文发表:2007-08-25 人气:309


TOM汽车频道的图片翻滚特效代码(javascript),代码有些复杂,但说明详细,但效率高。速度快。


 

<style>
<!--
#page_left_1{
 border:1px solid #000000;
 width:378px;
 margin-bottom: 2px;
}
#page_left_2{width:380px;
}
#page_left_2_1{
 width:74px;
 text-align:center;
 color:#000000;
 font-weight:normal;
 float:left;
 margin-right: 2px;
 background-image: url(http://auto.tom.com/images/auto_gb/p_12_02.jpg);
}
#page_left_2_1_1{
 width:100%;
 text-align:center;
 font-weight:normal;
 padding-top: 5px;
 CURSOR: hand;
}
#page_left_2_1_2{
 width:74px;
 text-align:center;
 color:#ffffff;
 font-weight:normal;
 padding-top: 5px;
}
#page_left_2_2{
 width:74px;
 text-align:center;
 color:#ffffff;
 font-weight:normal;
 float:left;
 margin-right: 2px;
 background-image: url(http://auto.tom.com/images/auto_gb/p_12_04.jpg);
 
}
.sty20 {
 font-family: "宋体";color:#000000;  font-size:12px;line-height: 20px;
 width:74px;
 text-align:center;
 color:#000000;
 font-weight:normal;
 float:left;
 margin-right: 2px;
 background-image: url(http://auto.tom.com/images/auto_gb/p_12_02.jpg);
}
.sty21 {
 font-family: "宋体";color:#ffffff;  font-size:12px;line-height: 20px;
 width:74px;
 text-align:center;
 color:#ffffff;
 font-weight:normal;
 float:left;
 margin-right: 2px;
 background-image: url(http://auto.tom.com/images/auto_gb/p_12_05.jpg);
 
}
.sty21 #page_left_2_1_1{
 background-image: url(http://auto.tom.com/images/auto_gb/p_12_05.jpg);
 background-image: url(http://auto.tom.com/images/auto_gb/p_12_03.gif);
 background-repeat: no-repeat;
 background-position: center top;
}
-->
</style>
<!-- Focus BEGIN -->
<script language="javascript">
<!--
 var imgUrl=new Array();
 var imgLink=new Array();
 var label = new Array();

         //第3幅图
 imgUrl[3]="http://auto.tom.com/uldf/2007/0824/maran/t2.jpg";
 imgLink[3]="http://auto.tom.com/2007-08-24/0D5C/02647894.html";
 label[3] = "新马自达6";

         //第2幅图
 imgUrl[2]="http://auto.tom.com/uldf/2007/0824/maran/t1.jpg";
 imgLink[2]="http://auto.tom.com/2007-08-24/0D5B/06636154.html";
 label[2] = "MG 7价格";

         //第1幅图
 imgUrl[1]="http://auto.tom.com/uldf/2007/0825/cuixiao/jd0825.jpg";
 imgLink[1]="http://auto.tom.com/2007-08-25/0D5B/05331663.html";
 label[1] = "沃尔沃C30";

         //第4幅图
 imgUrl[4]="http://auto.tom.com/uldf/2007/0824/lifangfang/20070824jd1.jpg";
 imgLink[4]="http://pic.auto.tom.com/";
 label[4] = "气质车模";

          //第5幅图
 imgUrl[5]="http://auto.tom.com/uldf/2007/0824/yaogang/huanxiang.jpg";
 imgLink[5]="http://bbs.auto.tom.com/";
 label[5] = "超级跑车";


 var num_pic =5;
 var label_width = 380/num_pic-2;
 
 var focusPicNumSrc="http://ent.tom.com/images/works/2j";
 var time1 = 0; //打开页面时等待图片载入的时间,单位为秒,可以设置为0
 var time2 = 4; //图片轮转的间隔时间
 
 var timeout1 = time1*1000;
 var timeout2 = time2*1000;
 var jumpUrl = '';
 var nn=1;//初始焦点
 var curFileNum = 1;//传递给myPlayer对象 表示目前焦点序列值
 
 document.write('<style>');
 document.write('.focusPic {border:1px #000000 solid; OVERFLOW: hidden;  WIDTH: 378px; POSITION: relative; HEIGHT: 213px}');
 document.write('.focusPicNum {Z-INDEX: 99; right: 0px; POSITION: absolute; TOP: 190px;MARGIN: 3px}');
 document.write('</style>');

 if(navigator.appName == "Microsoft Internet Explorer"){
  setTimeout('change_img()',timeout1);
 }
 function change_img(){
  if(nn>num_pic) nn=1;
  setTimeout('setFocus2('+nn+')',timeout1);
  nn++;
  tt=setTimeout('change_img()',timeout2);
 }
 function setFocus2(i){
  jumpUrl=imgLink[i];
  curFileNum = i;
  selectLayer1(i);
  imgInit.filters.revealTrans.Transition=23;
  imgInit.filters.revealTrans.apply();
     playTran();
  document.images.imgInit.src=imgUrl[i];
 }
 function setFocus1(i){
  nn = i;
  ln=i;
  curFileNum = i;
  selectLayer1(i);
  setFocus2(i);
 }
 function selectLayer1(i){
  for (a=1;a<num_pic+1;a++ ){
   //document.images['fi_'+a].src=focusPicNumSrc+'/bn_focus_num_ws_0'+a+'off.gif';
   //document.getElementById('label_'+id).class='sty20';
   var obj = GetObj('label_'+a);
   obj.className='sty20';
   obj.style.width=label_width;
  }
  //document.images['fi_'+i].src=focusPicNumSrc+'/bn_focus_num_ws_0'+i+'on.gif';
 // document.getElementById('label_'+id).class='sty21';
  var obj = GetObj('label_'+i);
  obj.className='sty21';
  obj.style.width=label_width;
 }
 function goUrl(){
  ln=nn;
  if (ln ==1)if (jumpUrl!='') jumpUrl=imgLink[ln];
  jumpTarget='_blank';
  if (jumpUrl != ''){
   if (jumpTarget != '')window.open(jumpUrl,jumpTarget);
   else location.href=jumpUrl;
  }
 }

 function playTran(){
  if (document.all)imgInit.filters.revealTrans.play();
 }
 function GetObj(objName){
     if(document.getElementById){
         return eval('document.getElementById("' + objName + '")');
     }else if(document.layers){
         return eval("document.layers['" + objName +"']");
     }else{
         return eval('document.all.' + objName);
     }
 }
//-->
</script>
<DIV class=focusPic id=focusPic>
<script language="JavaScript">
<!--
 document.write('<DIV class=focusPicNum style=display:none>');
 for (i=1;i<num_pic+1;i++ )
 {
  document.write('<A href=javascript:setFocus1('+i+');><IMG height=15 src='+focusPicNumSrc+'/bn_focus_num_ws_0'+i+'off.gif width=23 border=0 name=fi_'+i+'></A>');
 }
 document.write('</DIV>');
 document.write('<div id="page_left_1">');
 document.write('<a id="PicLink" href="javascript:goUrl()"><img src="'+imgUrl[1]+'" width=378  name=imgInit height="213" border="0" style="FILTER: revealTrans(duration=2,transition=6)"></a>');
 document.write('</div>');
 
 document.images.imgInit.src=imgUrl[1];
 
 
//-->
</script>
</DIV>

<div id="page_left_2">
<script language="javascript">
<!--
 for(i=1;i<num_pic+1;i++)
  document.write('<div class="sty20" style="width:'+label_width+'" id="label_'+i+'" onMouseOver="setFocus1('+i+')"><div id="page_left_2_1_1">'+label[i]+'</div></div>');
-->
</script>
  <div class="clear"></div>
</div>

<!-- Focus END -->

本页地址
相关文章

网络原创投稿,转载精品,重奖!
互联网企业应该是什么样子?
Google补充材料的灭亡,补充材料页面即将消
seo不需要外部链接,搜索引擎优化不需要外部
有需求就有互联网,需要什么,网络上就有什
二八规律,网站运营只有20%的赚钱
如何设计主流网页布局,大气网页结构的设计
免费互联网时代的转折点,收费网站的生存之
网站网摘代码,网摘源码,网摘插件代码
如何安装phpwind论坛,phpwind安装步骤
天极网的javascript图片滚动效果代码
搜索引擎不收录网站页面的常见原因
如何设计一个成功的网站
网站成功的关键在哪里?——你都具备了吗?
网站推广方法–友情链接
制作主页的五十个技巧
网站导航理论与实践
图片幻灯片代码
从ASP到PHP——我的建站程序选择之路
做IT人真累!做网站真累!

相关评论


本文章所属分类:首页 建站经验