威海网站建设中的JS+DIV的图片轮显效果

佰年网络>Posted on by admin2011年03月5日

    |    

原理就是层的循环显示与隐藏。

关键的JS代码如下:供威海网络公司参考

JavaScript代码
  • <script language=”javascript”>    
  •  var n=0;   
  •  var showImg = document.getElementById(“bigImg”);   
  •  var showTitle = document.getElementById(“imgtext”);   
  •  var showNum = document.getElementById(“thumbImg”);   
  •  function Mea(value){   
  •   n=value;   
  •   setBg(value);   
  •   settitle(value);   
  •   plays(value);   
  •  }   
  •  function setBg(value){   
  •    for(var i=0;i<7;i++)   
  •     if(value==i){showNum.getElementsByTagName(“li”)[i].className=’cur’;}    
  •   else{showNum.getElementsByTagName(“li”)[i].className=’normal’;}     
  •    }   
  •   function settitle(value){   
  •    for(var i=0;i<7;i++)   
  •     if(value==i){showTitle.getElementsByTagName(“li”)[i].className=’dis’;}    
  •   else{showTitle.getElementsByTagName(“li”)[i].className=’undis’;}     
  •    }    
  •  function plays(value){   
  •    for(i=0;i<7;i++)i==value?showImg.getElementsByTagName(“div”)[i].className=’dis’:showImg.getElementsByTagName(“div”)[i].className=’undis’;    
  •   
  •  }                
  •  function clearAuto(){clearInterval(autoStart)}   
  •  function setAuto(){autoStart=setInterval(“auto(n)”, 3000)}   
  •  function auto(){   
  •   n++;   
  •   if(n>=7)n=0;   
  •   Mea(n);   
  •  }   
  • setAuto();    
  • </script>  
  • 下面是HTML代码:
    <DIV id=”dplayer2″ style=”PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #ffffff; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 926px; PADDING-TOP: 0px; HEIGHT: 410px”>
    <div id=”bigImg”>
    <div><a href=” target=’_top’><img src=’uploadfiles/uploadimages/20101029152339.jpg’ width=’926′ height=’410′ border=0></a></div><div><a href=” target=’_top’><img src=’uploadfiles/uploadimages/20101029152629.jpg’ width=’926′ height=’410′ border=0></a></div><div><a href=” target=’_top’><img src=’uploadfiles/uploadimages/2010102915395.jpg’ width=’926′ height=’410′ border=0></a></div><div><a href=” target=’_top’><img src=’uploadfiles/uploadimages/20101029154326.jpg’ width=’926′ height=’410′ border=0></a></div><div><a href=” target=’_top’><img src=’uploadfiles/uploadimages/2010102915485.jpg’ width=’926′ height=’410′ border=0></a></div><div><a href=” target=’_top’><img src=’uploadfiles/uploadimages/20101029155140.jpg’ width=’926′ height=’410′ border=0></a></div><div><a href=” target=’_top’><img src=’uploadfiles/uploadimages/20101029155441.jpg’ width=’926′ height=’410′ border=0></a></div>
    </div>
    </DIV>
    <div>
    <ul id=”imgtext”>
    <li><a href=”http://briline.net” class=’link’>佰年网络</a></li><li><a href=”http://briline.net” class=’link’>seo</a></li><li><a href=”http://maimaibang.net” class=’link’>买卖帮</a></li><li><ahref=”http://briline.net” class=’link’>威海电子商务</a></li><li><a href=”http://briline.net” class=’link’>威海网络应用</a></li><li><a href=”http://briline.net” class=’link’>威海网络公司</a></li><li><a href=” class=’link’>威海IT政府采购</a></li>
    </ul>
    <ul id=”thumbImg”>威海php建站
    <li  onclick=’Mea(0);’>1</li><li  onclick=’Mea(1);’>2</li><li  onclick=’Mea(2);’>3</li><li  onclick=’Mea(3);’>4</li><li  onclick=’Mea(4);’>5</li><li  onclick=’Mea(5);’>6</li><li  onclick=’Mea(6);’>7</li>
    </ul>
    </div>

    最后是CSS样式表:

    <style type=”text/css”>
    .dis{
     display:block;
    }
    .undis{
     display:none
    }
    .dis img{}
    #imgtext{
     width:460px;
     float:left;
     height:20px;
     line-height:19px;
    }
    #imgtext li{
     text-align:right;
     list-style:none;
     font-weight:normal;
     padding-left:40px
    }
    #imgtext li a{ color:#333}
    #thumbImg{
     text-align:right;
     width:460px;
     float:right
    }
    #thumbImg li{
     width:15px;
     height:13px;
     cursor:hand;
     float:left;
     list-style:none;
     margin-right:1px;
     background:#333;
     color:#fff;
     font-size:12px;
     border:solid 1px #ccc;
     text-align:center
    }
    #thumbImg li:hover{
     border:solid 1px red
    }
    .bottom{
     MARGIN:0 auto;
     margin-top:10px;
     WIDTH: 925px;
    }威海专业建站
    .bottom ul{
     padding:0;
     margin:0
    }
    .cur{
     color:#FF0000;
    }
    .normal{
     color:#000000
    }
    .link{
     color:#000000;
     font-size:12px;
     text-decoration:none
    }威海最新建站技术
    .link:hover{
     color:#FF0000;
     font-size:12px;
     text-decoration:underline
    }
    </style>

    Related posts:

    1. 威海网站建设:新ICP备案图解 ...
    2. 友情链接 中国万网 新网数据 百 度 谷 歌 新浪网 中国雅虎 网 易...
    3. 搜索引擎优化  SEO(Search Engine Optimization),汉译为搜索引擎 … 完整阅读 →...
    4. 威海网络公司:佰年的企业愿景 成为中国企业信息化服务领域的知名品牌,成为推动中国电子商务发展的主力军!以客户的实际需求为企业发展的最高目标,提供最适合中国企业、随需应变的IT服务整体解决方案。让中国企业不分大小、在任何时候、任何地方,都能轻松享受IT高科技的最新成果,都能轻易开展电子商务、实现信息化,将商机和梦想延伸到世界各地! 完整阅读 →...
    5. 名片设计 ...

    联系我们
    • 统一服务热线
    • 电话 : 400-0631-286
    • 传真 : 0631-3655286
    • 地址 : 新威路11号北洋大厦702
    • 项目合作
    • 在线 : 63085704  |   744186339
    • 邮件 : DINGJW@BRILINE.NET
    • 跟单&ICP备案服务
    • ICP备案 : 852693012
    • 跟单查询 : 399626520
    • 邮件 : SERVICE@BRILINE.NET
    • 房产销控系统售前支持
    • 在线 : 4800393   |   63085704
    • 邮件 : SC@BRILINE.NET
    • 财务往来款项查询
    • 在线 : 399626520
    • 邮件 : BILL@BRILINE.NET
    
    佰年_威海网络公司:从网站建设到网络营销策划,我们用专业的服务保持0客户流失率!项目介绍:威海网页设计 威海网站建设 威海企业电子商务 威海域名注册 威海主机租用 威海企业邮局 威海网络seo优化 威海网络推广 威海在线客服系统 威海400电话办理 威海房产销控系统 威海招财猫建站 网站建设 佰年联系电话:0631-5858088 18663106255 信息动力 相伴佰年