设为首页
加入收藏
站点地图
首页 | 网站建设 | 杭州FPGA培训班,浙江FPGA培训班,苏州FPGA培训班,昆山FPGA培训班,常州FPGA培训班优化 | 网站推广 | 网络营销 | 网站运营 | 网站策划 | 在线讨论 | 下载中心
您当前的位置:WebSite -> 网站建设 -> 文章内容正文->带缩略图的5屏图片轮换广告js代码
 子栏目导航
 热门文章
 相关文章
 

带缩略图的5屏图片轮换广告js代码

作者:佚名  来源:转载  发布时间:2008-9-2 13:29:44  
tTop:0;
  if(isFF){
   pp.p7pn=true;
  }
  pp=pp.offsetParent;
 }
 if(isFF){
  pp=obj.parentNode;
  while(pp){
   if(!pp.p7pn&&pp.clientHeight){
    ct=(pp.offsetHeight-pp.clientHeight)/2;
    bt=(ct)?bt+ct:bt;
    cl=(pp.offsetWidth-pp.clientWidth)/2;
    bl=(cl)?bl+cl:bl;
   }
   if(pp.nodeName=="BODY"){
    break;
   }
   pp=pp.parentNode;
  }
  if(cl>0 || bl>0){
  }
 }
 pos[0]=l;
 pos[1]=t;
 return pos;
}
function P7_SSMsetPos(d,t,l){
 var i,pp,p,pf,tD=document.getElementById(d);
 pp=tD.parentNode;
 while(pp){
  if(pp.style){
   p=P7_getPropValue(pp,'position','position');
   if(p=="absolute" || p=="relative"){
    pf=P7_SSMgetPos(pp);
    l-=pf[0];
    t-=pf[1];
    break;
   }
  }
  pp=pp.parentNode;
 }
 tD.style.top=t+"px";
 tD.style.left=l+"px";
}
function P7_imgClick(a){
 if(a.href && a.href.indexOf(".")>-1){
  P7_SSMpause();
  document.p7NW=window.open(a.href,'ImageLink');
  document.p7NW.focus();
 }
 return false;
}
if(window.addEventListener){
 window.addEventListener("unload",P7_FFfix,false);
}
function P7_FFfix(){
 return;
}
把以上代码保存为show.js,调用代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="description" content="JS带缩略图的5屏轮换广告代码" />
<meta content="JS带缩略图的5屏轮换广告代码" name="keywords" />
<title>JS带缩略图的5屏轮换广告代码</title>
<link href="css/css.css" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="show.js"></script>
</head>

<body>
<div id="p7ssm">
      <div id="p7ssm_cf"> </div>
      <div id="p7ssm_loading"><img src="images/loading.gif" alt="" width="78" height="8" /></div>
      <table id="p7ssm_fstbl" border="0" cellpadding="0" cellspacing="0" summary="Fullsize Image">
        <tr>
          <td><div id="p7ssm_fullsize">
              <div id="p7ssm_fsc">
                <div id="p7ssm_fsw">
                  <div id="p7ssm_fsimg"><a href="javascript:;" id="p7ssm_fslink"><img src="images/biaozhi.gif" alt="懒人图库" name="p7ssm_im" width="390" height="245" border="0" id="p7ssm_im" /></a></div>
                  <div id="p7ssm_description"></div>
                </div>
              </div>
            </div></td>
        </tr>
      </table>
      <div id="p7SSMwhmb">
        <div id="p7ssm_thumbs">
          <div id="p7SSMwp_1">
            <div class="p7ssm_thumb_section">
              <ul><!-- 修改内容开始 -->
                <li><a href="images/001.jpg">
    <img src="images/001.jpg" alt="《福娃奥运漫游记》获动漫大赛最佳作品奖" width="390" height="245" /></a>
                  <div class="p7ssm_lk"><a href="http://www.jz123.cn/">点击查看详情</a></div>
                  <div class="p7ssm_fd">《福娃奥运漫游记》获动漫大赛最佳作品奖</div>
                </li>
                <li><a href="images/002.jpg">
    <img src="images/002.jpg" alt="超级插画设计 3D机器人与平面相结合" width="390" height="245" /></a>
                  <div class="p7ssm_lk"><a href="http://www.jz123.cn/">点击查看详情</a></div>
                  <div class="p7ssm_fd">超级插画设计 3D机器人与平面相结合</div>
                </li>
                <li><a href="images/003.jpg">
    <img src="images/003.jpg" alt="洁净舒适的XP桌面壁纸 轻松愉快的环境" width="390" height="245" /></a>
                  <div class="p7ssm_lk"><a href="http://www.jz123.cn/">点击查看详情</a></div>
                  <div class="p7ssm_fd">洁净舒适的XP桌面壁纸 轻松愉快的环境</div>
                </li>
                <li><a href="images/004.jpg">
    <img src="images/004.jpg" alt="室内装修三维设计 创造简洁舒适" width="390" height="245" /></a>
                  <div class="p7ssm_lk"><a href="http://www.jz123.cn/">点击查看详情</a></div>
                  <div class="p7ssm_fd">室内装修三维设计 创造简洁舒适</div>
                </li>
                <li><a href="images/005.jpg">
    <img src="images/005.jpg" alt="世界上令人叹为观止的仿真的机器人" width="390" height="245" /></a>
                  <div class="p7ssm_lk"><a href="http://www.jz123.cn/">点击查看详情</a></div>
                  <div class="p7ssm_fd">世界上令人叹为观止的仿真的机器人</div>
                </li>
              <!-- 修改内容结束 --></ul>
              <br class="p7ssm_clearThumbs" />
            </div>
          </div>
        </div>
      </div>
      <div id="p7ssm_toolbar">
        <div class="p7ssm_sectionTrigger"><a id="p7SSMtp_1" href="#">New Image Set</a></div>
        <div id="p7ssm_dragbar" title="Move"><span>Move</span></div>
        <div id="p7ssm_preview">  
          <table summary="Thumbnail Preview">
            <tr>
              <td><img src="images/biaozhi.gif" alt="懒人图库" /></td>
            </tr>
          </table>
        </div>
        <div id="p7ssm_tools">
          <table border="0" cellpadding="0" cellspacing="0" summary="Slideshow Toolbar">
            <tr>
              <td><div id="p7ssm_nav_wrapper"><a id="p7SSMtnav" href="#" title="Menu"><em>Navigate</em></a>
                  <div id="p7SSMwnav">
                    <div id="p7ssm_navList">
                      <ul>
                        <li></li>
                      </ul>
                    </div>
                  </div>
                </div></td>
              <td><a href="#" title="Hide or Show Thumbnails" id="p7SSMthmb"><em>Hide Thumbs</em></a></td>
              <td><a href="#" id="p7ssm_first" title="First Image"><em>First</em></a></td>
              <td><a href="#" id="p7ssm_prev" title="Previous Image"><em>Previous</em></a></td>
              <td><a href="#" id="p7ssm_pp" class="p7ssm_pause" title="Pause"><em>Pause</em></a></td>
              <td><a href="#" id="p7ssm_next" title="Next Image"><em>Next</em></a></td>
              <td><a href="#" id="p7ssm_last" title="Last Image"><em>Last</em></a></td>
              <td><div id="p7ssm_slidechannel">
                  <div id="p7ssm_slider"><a href="#" id="p7ssm_slidebar" title="Speed:"><em>Set Speed</em></a></div>
                                  </div></td>
               </tr>
          </table>
        </div>
      </div>
<!--[if IE 7]>
<style>
#p7ssm, #p7ssm div {zoom: 1;}
</style><![endif]-->
<!--[if IE 6]><style>
#p7ssm a, #p7ssm, #p7ssm div, #p7ssm_thumb_wrapper {zoom: 1;}
.p7ssm_thumb_section {padding-right: 0; padding-left: 0;}
.p7ssm_thumb_section a {float: left;}
</style><![endif]-->
<!--[if IE 5]><style>
#p7ssm {}
.p7ssm_sectionTrigger {text-align: left;}
#p7ssm_navList li {float: left; clear:both; width: 100%;}
#p7ssm, #p7ssm_w1, #p7ssm_w2, #p7ssm_description, #p7ssm_preview,
#p7ssm_navList a, .p7ssm_sectionTrigger a,

上一页  [1] [2] [3] [4] [5] [6]  下一页

 [返回上一页] [打 印] [收 藏]
百度中查看“带缩略图的5屏图片轮换广告js代码”相关文章

版权申明:本站网站建设资源来源网络,如有侵犯您的版权,请来Q告知 我们会在24小时内删除!

下一篇文章:Global.asa文件
Copyright © 2008-2010 www.mepeixun.com All Rights Reserved
服务QQ:52466268 邮箱:meipeixun@163.com
备案号:苏ICP备07200130号