你的位置:HBcms宏博内容管理系统 建站经验 正文
内容搜索
热门内容
  1. 网站logo在线设计,免..
  2. 域名解析文件hosts文件..
  3. 教你如何做网线接头:..
  4. qq怎么截图?如何在qq..
  5. 雅虎yahoo邮箱smtp和p..
  6. 新注册126邮箱或163邮..
  7. 幻灯片式的网页图片滚..
  8. 做网站怎么赚钱?什么..
  9. com域名和cn域名net域..
  10. Google支付系统(Googl..
推荐内容
  1. 做一个商业网站要多少..
  2. 国外服务器租用(国外..
  3. 深圳做网站的公司!=深..
  4. 网络原创投稿,转载精..
  5. 美国服务器租赁Window..
  6. 699元的美国服务器出租..
  7. 添加友情链接,速度别..
  8. “原始人”卷款潜逃事..
  9. 设置Godaddy支持zend ..
  10. 网页设计中常用的CSS命..
TOM汽车频道的图片翻滚特效代码(javascript)
  •  添加时间:2007-08-25 发表时间:2007-08-25 人气:1377
  • 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 -->

  • 点这里复制本页地址发送给您QQ/MSN上的好友
  • 相关文章
  • 相关评论
  • 本文章所属分类:首页 建站经验