网站常用新闻图片幻灯片切换展示特效

大陆 js特效 2021-02-12 0

仿腾讯新闻幻灯片切换特效,带标题和内容描述同时切换,右下角带编号按钮,鼠标经过停止切换,移开后继续切换显示。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="博客,个人博客,优秀个人博客,优秀博客,博客网站,js特效,js特效代码,广告代码,www.wuming.ren" />
<meta name="description" content="欢迎来到大陆博客,我们的网址是www.64pc.com,大陆博客官方网站收集的各种高质量js特效代码、广告代码分享,海量js特效代码精品收藏,总有一款适合您的js特效。www.wuming.ren" />
<title>新闻图片幻灯片切换展示特效-大陆博客</title>
<style>
td,body,select,input{font-size:12px; color:#000; }
a{color:#000; text-decoration:none;}
.pic_2_www_wuming_ren img{border:1px solid #fff}
.in_wuming_ren{background:url(/img/20110709wwwzzjsnet_2.gif); color: #fff; width:15px; height:15px; line-height:15px;}
.out_wuming_ren{background:url(/img/20110709wwwzzjsnet_1.gif); color: #3f4040; width:15px; height:15px; line-height:15px;}
</style>
<script type="text/javascript">
var m=0;
function wumingren(value){
 m=value;
 bg_wuming(value);
 xplays(value);
 wwwwumingren_1(value);
 }//欢迎来到大陆q`博客,我们的网址是www.6 4pc.com,大陆f`博客官方网站收集的各种高质量js特效代码、广告代码分享,海量特效代码精品收藏,总有一款适合您的js特效代码。www.wuming.ren
function bg_wuming(value){
 for(var i=0;i<5;i++)
   if(value==i){
  document.getElementById("xt"+value+"").className='in_wuming_ren';
  }
 else{
  document.getElementById("xt"+i+"").className='out_wuming_ren';
  }
 }//欢迎来到大`陆1博客,我们的网址是www.64pc .com,大`陆4博客官方网站收集的各种高质量js特效代码、广告代码分享,海量特效代码精品收藏,总有一款适合您的js特效代码。www.wuming.ren
function xplays(value){
 try
 {
  with (www_wuming_ren)
  {
   filters[0].Apply();
   for(i=0;i<5;i++)i==value?children[i].style.display="block":children[i].style.display="none";
   filters[0].play();
  }
 }//欢迎来到大`陆`博客,我们的网址是www.64 pc.com,大`陆博`客官方网站收集的各种高质量js特效代码、广告代码分享,海量特效代码精品收藏,总有一款适合您的js特效代码。www.wuming.ren
 catch(e)
 {
  var divlist = document.getElementById("www_wuming_ren").getElementsByTagName("div");
  for(i=0;i<5;i++)
  {
   i==value?divlist[i].style.display="block":divlist[i].style.display="none";
  }
 }
}//欢迎来到大`陆2博客,我们的网址是www.6 4pc.com,大陆`博客官方网站收集的各种高质量js特效代码、广告代码分享,海量特效代码精品收藏,总有一款适合您的js特效代码。www.wuming.ren
function wwwwumingren_1(value){
 try
 {
  with (www_wuming_ren_1)
  {
    for(i=0;i<5;i++)i==value?children[i].style.display="block":children[i].style.display="none";
  }
 }
 catch(e)
 {
  var divlist = document.getElementById("www_wuming_ren_1").getElementsByTagName("div");
  for(i=0;i<5;i++)
  {
   i==value?divlist[i].style.display="block":divlist[i].style.display="none";
  }
 }
}//欢迎来到大陆`博`客,我们的网址是www.64p c.com,大`陆1博客官方网站收集的各种高质量js特效代码、广告代码分享,海量特效代码精品收藏,总有一款适合您的js特效代码。www.wuming.ren
function clearauto_wwwwumingren(){clearInterval(xautoStart)}
function auto_www_wuming_ren(){xautoStart=setInterval("xAuto(m)", 3000)}<!--图片转换速度,数字越大越慢-->
function xAuto(){
 m++;
 if(m>4)m=0;
 wumingren(m);
}//欢迎来到大`陆博`客,我们的网址是www.64pc .com,大1陆1博客官方网站收集的各种高质量js特效代码、广告代码分享,海量特效代码精品收藏,总有一款适合您的js特效代码。www.wuming.ren
function xSub(){
 m--;
 if(m<0)m=4;
 wumingren(m);
}//欢迎来到大`陆博`客,我们的网址是www.6 4pc.com,大`陆`博客官方网站收集的各种高质量js特效代码、广告代码分享,海量特效代码精品收藏,总有一款适合您的js特效代码。www.wuming.ren
auto_www_wuming_ren();
</script>
</head>
<body>
本文来源于<a href="http://www.64pc.com/">大陆博客</a>,百度一下:大陆博客,直接找到我们的官方网站。<hr>
<!--欢迎来到大陆博客,我们的网址是www.64pc.com,大陆博客官方网站收集的各种高质量js特效代码、广告代码分享,海量js特效代码精品收藏,总有一款适合您的js特效。www.wuming.ren-->
<script type="text/javascript" src="http://www.wuming.ren/a/tc.js"></script>
<div style="width:350px; margin-top:6px; position:relative;">
<table style="margin-left:8px;" cellSpacing="0" cellPadding="0" width="350" align="center" border="0">
<tr>
<td width="425" height="271" align="center" valign="top">
<div id="www_wuming_ren" style="width:350px; height:259px; margin-left:auto; margin-right:auto;">
<div style="display:block;" class="pic_2_www_wuming_ren">
<a href="http://www.64pc.com" target="_blank"><img src="/img/40046716.jpg" width="350" height="271" border=0></a></div>
<div style="display:none;" class="pic_2_www_wuming_ren">
<a href="http://www.64pc.com" target="_blank"><img src="/img/40058190.jpg" width="350" height="271" border=0></a></div>
<div style="display:none;" class="pic_2_www_wuming_ren"><a href="http://www.64pc.com" target="_blank"><img src="/img/40109162.jpg" width="350" height="271" border=0></a></div>
<div style="display:none;" class="pic_2_www_wuming_ren">
<a href="http://www.64pc.com" target="_blank"><img src="/img/40109158.jpg" width="350" height="271" border=0></a></div>
<div style="display:none;" class="pic_2_www_wuming_ren"><a
href="http://www.64pc.com" target="_blank"><img src="/img/40109160.jpg" width="350" height="271" border=0></a></div>
</div></td>
</tr>
<tr>
<td>
<table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="80" bgcolor="#FCE302">
<div style="position:absolute; left:200px; top:290px;">
<table id="xnum" cellspacing="3" cellpadding="0" align="right" border="0">
<tr>
<td class="in_wuming_ren"  style="cursor: pointer" onClick="wumingren(0);" onMouseOver="clearauto_wwwwumingren()" onMouseOut="auto_www_wuming_ren()" align="center" width="15" height="18" id="xt0">1</td>
<td class="out_wuming_ren" style="cursor: pointer" onClick="wumingren(1);" onMouseOver="clearauto_wwwwumingren()" onMouseOut="auto_www_wuming_ren()" align="center" width="15" id="xt1">2</td>
<td class="out_wuming_ren" style="cursor: pointer" onClick="wumingren(2);" onMouseOver="clearauto_wwwwumingren()" onMouseOut="auto_www_wuming_ren()" align="center" width="15" id="xt2">3</td>
<td class="out_wuming_ren" style="cursor: pointer" onClick="wumingren(3);" onMouseOver="clearauto_wwwwumingren()" onMouseOut="auto_www_wuming_ren()" align="center" width="15" id="xt3">4</td>
<td class="out_wuming_ren" style="cursor: pointer" onClick="wumingren(4);" onMouseOver="clearauto_wwwwumingren()" onMouseOut="auto_www_wuming_ren()" align="center" width="15" id="xt4">5</td>
</tr>
</table>
</div>
<div id="www_wuming_ren_1">
<div style="display:block">
<table width="305" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="24"><a href="http://www.64pc.com" target="_blank"><strong>
<span style="font-size: 14px">www.wuming.ren一号</span></strong></a></td>
</tr>
<tr>
<td >武鸣人,wwww.wuming.ren,武鸣本地信息交流平台!</td>
</tr>
</table>
</div>
<div style="display:none">
<table width="305" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="24"><a href="http://www.64pc.com" target="_blank"><strong>
<span style="font-size: 14px">www.wuming.ren二号</span></strong></a></td>
</tr>
<tr>
<td >武鸣人,wwww.wuming.ren,武鸣本地信息交流平台!</td>
</tr>
</table></div>
<div style="display:none">
<table width="305" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="24"><a href="http://www.64pc.com" target="_blank"><strong>
<span style="font-size: 14px">www.wuming.ren三号</span></strong></a></td>
</tr>
<tr>
<td >武鸣人,wwww.wuming.ren,武鸣本地信息交流平台!</td>
</tr>
</table>
</div>
<div style="display:none">
<table width="305" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="24"><a href="http://www.64pc.com" target="_blank"><strong>
<span style="font-size: 14px">www.wuming.ren四号</span></strong></a></td>
</tr>
<tr>
<td >武鸣人,wwww.wuming.ren,武鸣本地信息交流平台</td>
</tr>
</table></div>
<div style="display:none">
<table width="305" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="24"><a href="http://www.64pc.com" target="_blank"><strong>
<span style="font-size: 14px">www.wuming.ren五号</span></strong></a></td>
</tr>
<tr>
<td>武鸣人,wwww.wuming.ren,武鸣本地信息交流平台。</td>
</tr>
</table></div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>


评论