腾讯新闻首页js图片切换特效代码

这个是腾讯新闻首页的图片切换代码,用户可点击窗口右下角图片编号切换图片显示,这个图片切换特效兼容当前主流浏览器。

<!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=gb2312" />
<title>中国沃柑看武鸣,广西农产品供求信息,www.64pc.com</title>
<meta name="keywords" content="沃柑,武鸣沃柑,中国沃柑看武鸣,农产品信息,农业资讯,农产品供求信息,广西农产品供求信息,www.64pc.com" />
<meta name="description" content="www.64pc.com,武鸣,沃柑之乡,中国沃柑看武鸣,本站有广西武鸣地区大量一手农产品供求信息,服务于广大武鸣老乡农民朋友,我爱你,我的家乡!各位呗哝需要发布农产品供求信息外嘀抖!" />
<style>
body{margin:0;padding:0;}
td,body,select,input{font-size:12px; color:#000; }
a{color:#000; text-decoration:none;}
a:hover{color:#ff0000; text-decoration:underline;}
img{border:none; padding:0; margin:0;}
</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,以质量为核心,以实用为目的,打造一流网页特效站!zzjs.net,站长js特效。<a href="http://www.64pc.com">中国沃柑看武鸣</a>。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,305686263@qq.com,用.net打造靓站。中国沃柑看武鸣,www.64pc.com-->
<script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script>
<table width=910 border=0 cellpadding=0 cellspacing=1 bgcolor="9BB0C1" align="center">
  <tr>
    <td width="534" bgcolor="CFDAE0" align="right" valign="top">
      <table width="534" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="15"></td>
          </tr>
          <tr>
            <td align="left">
              <style type="text/css">
          .bigon{background:url(/img/13663208.gif);color:#FFF; line-height:15px;}
          .bigoff{background:url(/img/13663209.gif);color:#000; line-height:15px;}
          a.bla{color:#000; text-decoration:none}
          a.bla:hover{color:#F00; text-decoration:underline}
          </style>
          <table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
              <td width="500"><div id="fc" style="width:500px;height:380px;filter:progid:DXImageTransform.Microsoft.Fade ( duration=0.5,overlap=1.0 );">
<div style="display:block;">
<!-- 图1 -->
<a href="http://www.zzjs.net" target="_blank"><img name="page_cnt_1" src="/img/40109162.jpg" style="BORDER: #ffffff 1px solid; " width="500" height="380" border="0" onMouseOver="clearAuto();" onMouseOut="setAuto()" /></a></div>
<div style="display:none;">
<!-- 图2 -->
<a href="http://www.zzjs.net" target="_blank"><img name="page_cnt_1" src="/img/40109164.jpg" style="BORDER: #ffffff 1px solid; " width="500" height="380" border="0" onMouseOver="clearAuto();" onMouseOut="setAuto()" /></a></div>
<div style="display:none;">
<!-- 图3 -->
<a href="http://www.zzjs.net" target="_blank"><img name="page_cnt_1" src="/img/40090376.jpg" style="BORDER: #ffffff 1px solid; " width="500" height="380" border="0" onMouseOver="clearAuto();" onMouseOut="setAuto()" /></a></div>
<div style="display:none;">
<!-- 图4 -->
<a href="http://www.zzjs.net" target="_blank"><img name="page_cnt_1" src="/img/40058190.jpg" style="BORDER: #ffffff 1px solid; " width="500" height="380" border="0" onMouseOver="clearAuto();" onMouseOut="setAuto()" /></a></div>
<div style="display:none;">
<!-- 图5 -->
<a href="http://www.zzjs.net" target="_blank"><img name="page_cnt_1" src="/img/40109160.jpg" style="BORDER: #ffffff 1px solid; " width="500" height="380" border="0" onMouseOver="clearAuto();" onMouseOut="setAuto()" /></a></div>
<div style="display:none;">
<!-- 图6 -->
<a href="http://www.zzjs.net" target="_blank"><img name="page_cnt_1" src="/img/40109158.jpg" style="BORDER: #ffffff 1px solid; " width="500" height="380" border="0" onMouseOver="clearAuto();" onMouseOut="setAuto()" /></a></div>
<div style="display:none;">
<!-- 图7 -->
<a href="http://www.zzjs.net" target="_blank"><img name="page_cnt_1" src="/img/40046716.jpg" style="BORDER: #ffffff 1px solid; " width="500" height="380" border="0" onMouseOver="clearAuto();" onMouseOut="setAuto()" /></a></div>
</div>
</td>
            </tr>
            <tr>
              <td height="26" background=""><table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
                  <tr>
          <td width="300" align="center"  onmouseover="clearAuto();" onMouseOut="setAuto()">
            <div id="con">
<div style="display:block;">
<!-- 图1 -->
<a href="http://www.zzjs.net" target="_blank" style="FONT-SIZE: 14px;"> <b>云南保山民众感伤家园被毁</b></a></div>
<div style="display:none;">
<!-- 图2 -->
<a href="http://www.zzjs.net" target="_blank" style="FONT-SIZE: 14px;"> <b>巴以直接谈判在华盛顿重启<b></a></div>
<div style="display:none;">
<!-- 图3 -->
<a href="http://www.zzjs.net" target="_blank" style="FONT-SIZE: 14px;"> <b>世博园最美工作人员 曾摘世界小姐桂冠</b></a></div>
<div style="display:none;">
<!-- 图4-->
<a href="http://www.zzjs.net" target="_blank" style="FONT-SIZE: 14px;"> <b>腾讯一周精选:金钱鲨误入渔网窒息死亡</b></a></div>
<div style="display:none;">
 <!-- 图5 -->
<a href="http://www.zzjs.net" target="_blank" style="FONT-SIZE: 14px;"> <b>德国民众向政府大楼扔鞋抗议火车站改建</b></a></div>
<div style="display:none;">
<!-- 图6 -->
<a href="http://www.zzjs.net" target="_blank" style="FONT-SIZE: 14px;"> <b>美国男子造喷气校车 可喷出20米长火舌</b></a></div>
<div style="display:none;">
<!-- 图7 -->
<a href="http://www.zzjs.net" target="_blank" style="FONT-SIZE: 14px;"> <b>水上运动会花样游泳表演“出水芙蓉”</b></a></div>
</div> </td>
          <td width="200">
            <table border="0" align="center" cellpadding="0" cellspacing="3" class="lhn" id="num">
                        <tr>
                          <td width="15" height="15" align="center" class="bigon" onclick="Mea(0);" onmouseover="clearAuto();" onmouseout="setAuto()" style="cursor:pointer;">1</td>
                          <td width="15" align="center" class="bigoff" onclick="Mea(1);" onmouseover="clearAuto();" onmouseout="setAuto()" style="cursor:pointer;">2</td>
                          <td width="15" align="center" class="bigoff" onclick="Mea(2);" onmouseover="clearAuto();" onmouseout="setAuto()" style="cursor:pointer;">3</td>
                          <td width="15" align="center" class="bigoff" onclick="Mea(3);" onmouseover="clearAuto();" onmouseout="setAuto()" style="cursor:pointer;">4</td>
                          <td width="15" align="center" class="bigoff" onclick="Mea(4);" onmouseover="clearAuto();" onmouseout="setAuto()" style="cursor:pointer;">5</td>
                          <td width="15" align="center" class="bigoff" onclick="Mea(5);" onmouseover="clearAuto();" onmouseout="setAuto()" style="cursor:pointer;">6</td>
                         <td width="15" align="center" class="bigoff" onclick="Mea(6);" onmouseover="clearAuto();" onmouseout="setAuto()" style="cursor:pointer;">7</td>
                        </tr>
                    </table>
          </td>
                  </tr>
              </table></td>
            </tr>
</table>
<script>
var n=0;
var showNum = document.getElementById("num");
function Mea(value){
    n=value;
    setBg(value);
    plays(value);
    cons(value);
    }//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
function setBg(value){
    for(var i=0;i<7;i++)
   if(value==i){
        showNum.getElementsByTagName("td")[i].className='bigon';
        }
    else{
        showNum.getElementsByTagName("td")[i].className='bigoff';
        }
    }
function plays(value){
    try
    {//欢迎来到站长特效 网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
        with (fc)
        {
            filters[0].Apply();
            for(i=0;i<7;i++)i==value?children[i].style.display="block":children[i].style.display="none";
            filters[0].play();
        }
    }
    catch(e)
    {
        var divlist = document.getElementById("fc").getElementsByTagName("div");
        for(i=0;i<7;i++)
        {
            i==value?divlist[i].style.display="block":divlist[i].style.display="none";
        }
    }
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
function cons(value){
    try
    {
        with (con)
        {
                for(i=0;i<7;i++)i==value?children[i].style.display="block":children[i].style.display="none";
        }
    }
    catch(e)
    {
        var divlist = document.getElementById("con").getElementsByTagName("div");
        for(i=0;i<7;i++)
        {
            i==value?divlist[i].style.display="block":divlist[i].style.display="none";
        }
    }
}//欢迎来到站长特效网,我们的网址是www.zzj s.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
function clearAuto(){clearInterval(autoStart)}
function setAuto(){autoStart=setInterval("auto(n)", 5000)}
function auto(){
    n++;
    if(n>6)n=0;
    Mea(n);
}
function sub(){
    n--;
    if(n<0)n=6;
    Mea(n);
}
setAuto();
 //欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
</script><!--[if !IE]>|xGv00|657b1020e1a5c19c61e544a42ee59fd5<![endif]-->
            </td>
          </tr>
      </table>
    </td>
    <td width="376" height="440" bgcolor="#FFFFFF"><!--[if !IE]>|xGv00|378f63c1b1d886fd8bfcf4eabd0400e1<![endif]-->腾讯新闻首页js图片切换特效 <a href="http://www.zzjs.net">站长特效网</a>整理收集</td>
  </tr>
</table>
</body>
</html>


本文作者:大陆

本文链接:http://www.zzjs.net/post/688.html

特别赞助:中国沃柑看武鸣 武鸣沃柑 广西农产品供求信息

上一篇:文章评论页点击链接才弹文本框图层特效

发表评论