首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

网站上面有这种切换效果

Posted in Javascript onJune 26, 2006

<!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>新闻切换技术</title>
<style type="text/css">
<!--
body { text-align: center; margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}
div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;}
h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}
table,td,tr,th{font-size:12px;}
a:link {color: #000; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #c00; text-decoration:underline;}
a:active {color: #000;}
.focusPic{margin:0 auto; width:244px;}
.focusPic .pic{margin:0 auto; width:240px; height:180px; padding:2px 0 0;}
.focusPic .adPic{margin:0 auto 5px; width:240px; height:29px; overflow:hidden;background:url(http://tech.163.com/newimg/adpic.gif);}
.focusPic .adPic .text{float:right; padding:9px 4px 0 0; width:140px;}
.focusPic .adPic .text a{color:#1f3a87;}
.focusPic .adPic .text a:hover{color:#bc2931;}
.focusPic h2{ float:left; width:232px;padding:4px 0 3px 12px; font-size:14px; text-align:left;}
.focusPic p{float:left; width:226px;line-height:160%; margin:0; text-align:left;padding:0 0 10px 12px;}
.focusPic p img {margin:0px 0 2px;}
.focusPic .more{ margin:0 auto; width:240px; }
.focusPic .more .textNum{float:right; margin:0 8px 0 0;padding:0 0 4px;}
.focusPic .more .textNum .text{float:left; font-weight:bold; padding:7px 6px 0 0; color:#666;}
.focusPic .more .textNum .num{float:left; width:113px; height:19px;}
.focusPic .more .textNum .bg1{ background:url(http://tech.163.com/newimg/num1.gif);}
.focusPic .more .textNum .bg2{ background:url(http://tech.163.com/newimg/num2.gif);}
.focusPic .more .textNum .bg3{ background:url(http://tech.163.com/newimg/num3.gif);}
.focusPic .more .textNum .bg4{ background:url(http://tech.163.com/newimg/num4.gif);}
.focusPic .more .textNum .num ul{ float:left; width:113px;}
.focusPic .more .textNum .num li{float:left; width:28px; font-weight:bold;display:block; color:#fff; list-style-type:none; padding:6px 0 0;}
.focusPic .more .textNum .num li a{color:#fff; padding:0 5px; }
.focusPic .more .textNum .num li a:visited{color:#fff;}
.focusPic .more .textNum .num li a:hover{color:#ff0;}

-->
</style>
</head>

<body>
 <script language="JavaScript" type="text/javascript">
var nn;
nn=1;
setTimeout('change_img()',6000);
function change_img()
{
 if(nn>4) nn=1
 setTimeout('setFocus1('+nn+')',6000);
 nn++;
 tt=setTimeout('change_img()',6000);
}
function setFocus1(i)
{
 selectLayer1(i);
}
function selectLayer1(i)
{
 switch(i)
 {
 case 1:
 document.getElementById("focusPic1").style.display="block";
 document.getElementById("focusPic2").style.display="none";
 document.getElementById("focusPic3").style.display="none";
 document.getElementById("focusPic4").style.display="none";
 document.getElementById("focusPic1nav").style.display="block";
 document.getElementById("focusPic2nav").style.display="none";
 document.getElementById("focusPic3nav").style.display="none";
 document.getElementById("focusPic4nav").style.display="none";
 break;
 case 2:
 document.getElementById("focusPic1").style.display="none";
 document.getElementById("focusPic2").style.display="block";
 document.getElementById("focusPic3").style.display="none";
 document.getElementById("focusPic4").style.display="none";
 document.getElementById("focusPic1nav").style.display="none";
 document.getElementById("focusPic2nav").style.display="block";
 document.getElementById("focusPic3nav").style.display="none";
 document.getElementById("focusPic4nav").style.display="none";
 break;
 case 3:
 document.getElementById("focusPic1").style.display="none";
 document.getElementById("focusPic2").style.display="none";
 document.getElementById("focusPic3").style.display="block";
 document.getElementById("focusPic4").style.display="none";
 document.getElementById("focusPic1nav").style.display="none";
 document.getElementById("focusPic2nav").style.display="none";
 document.getElementById("focusPic3nav").style.display="block";
 document.getElementById("focusPic4nav").style.display="none";
 break;
 case 4:
 document.getElementById("focusPic1").style.display="none";
 document.getElementById("focusPic2").style.display="none";
 document.getElementById("focusPic3").style.display="none";
 document.getElementById("focusPic4").style.display="block";
 document.getElementById("focusPic1nav").style.display="none";
 document.getElementById("focusPic2nav").style.display="none";
 document.getElementById("focusPic3nav").style.display="none";
 document.getElementById("focusPic4nav").style.display="block";
 break;
 }
}
</script>
 <div class="focusPic">
 <div id="focusPic1" style="display:block ;">
 <div class="pic"> <a href="http://tech.163.com/special/000915SN/soft2005.html"><img src="http://cimg.163.com/tech/2006/1/18/2006011810122068706.jpg" alt="网易学院05年软件评选结果" width="240" height="180" border="0" /></a> </div>
 <h2><a href="http://tech.163.com/special/000915SN/soft2005.html">网易学院05年软件评选结果</a></h2>
 <p>经过大家的热情投票和我们的辛劳整理，网易学院2005年年度软件评选结果终于出炉啦。点击进入查看……<img src="/newimg/i2.gif" alt="详细" width="3" height="5" /> <a href="http://tech.163.com/special/000915SN/soft2005.html" class="cDRed">详细</a></p>
 </div>
 <div id="focusPic2" style="display: none ;">
 <div class="pic"> <a href="http://tech.163.com/discover/"><img src="http://cimg.163.com/tech/2006/1/17/200601171557008cee7.jpg" alt="颠覆丛林动物生存法则" width="240" height="180" border="0" /></a> </div>
 <h2><a href="http://tech.163.com/discover/">颠覆丛林动物生存法则</a></h2>
 <p>群居动物的这种行为颠覆了我们通常认为的，在动物世界通行的 “丛林法则”，动物不都自私，不都是弱肉强食的。<img src="/newimg/i2.gif" alt="详细" width="3" height="5" /> <a href="http://tech.163.com/discover/" class="cDRed">详细</a></p>
 </div>
 <div id="focusPic3" style="display: none ;">
 <div class="pic"> <a href="http://tech.163.com/special/00091MNJ/itobserve015.html"><img src="http://cimg.163.com/tech/2006/1/17/2006011711483290a60.jpg" alt="WAPI并非贸易阴谋" width="240" height="180" border="0" /></a> </div>
 <h2><a href="http://tech.163.com/special/00091MNJ/itobserve015.html">WAPI并非贸易阴谋</a></h2>
 <p>近日国家做出决定：“将向其他的国内及国外企业公布该算法”。事实证明中国WAPI标准并非是贸易阴谋。<img src="/newimg/i2.gif" alt="详细" width="3" height="5" /> <a href="http://tech.163.com/special/00091MNJ/itobserve015.html" class="cDRed">详细</a></p>
 </div>
 <div id="focusPic4" style="display: none ;">
 <div class="pic"> <a href="http://tech.163.com/special/00091OSI/horizons.html"><img src="http://cimg.163.com/tech/2006/1/17/200601171002503f251.jpg" alt="新视野号探测冥王星特别专题" width="240" height="180" border="0" /></a> </div>
 <h2><a href="http://tech.163.com/special/00091OSI/horizons.html">新视野号探测冥王星特别专题</a></h2>
 <p>美国宇航局将于北京时间18日凌晨2时24分发射新视野号探测器，造访这颗人类唯一尚未探测过的行星-冥王星。<img src="/newimg/i2.gif" alt="详细" width="3" height="5" /> <a href="http://tech.163.com/special/00091OSI/horizons.html" class="cDRed">详细</a></p>
 </div>
 <div class="more">
 <div class="textNum">
 <div class="text">> 更多头图新闻</div>
 <div class="num bg1" id="focusPic1nav" style="display: block;">
 <ul>
 <li>1</li>
 <li><a href="javascript:setFocus1(2);" target="_self">2</a></li>
 <li><a href="javascript:setFocus1(3);" target="_self">3</a></li>
 <li><a href="javascript:setFocus1(4);" target="_self">4</a></li>
 </ul>
 </div>
 <div class="num bg2" id="focusPic2nav" style="display: none;">
 <ul>
 <li><a href="javascript:setFocus1(1);" target="_self">1</a></li>
 <li>2</li>
 <li><a href="javascript:setFocus1(3);" target="_self">3</a></li>
 <li><a href="javascript:setFocus1(4);" target="_self">4</a></li>
 </ul>
 </div>
 <div class="num bg3" id="focusPic3nav" style="display: none;">
 <ul>
 <li><a href="javascript:setFocus1(1);" target="_self">1</a></li>
 <li><a href="javascript:setFocus1(2);" target="_self">2</a></li>
 <li>3</li>
 <li><a href="javascript:setFocus1(4);" target="_self">4</a></li>
 </ul>
 </div>
 <div class="num bg4" id="focusPic4nav" style="display: none;">
 <ul>
 <li><a href="javascript:setFocus1(1);" target="_self">1</a></li>
 <li><a href="javascript:setFocus1(2);" target="_self">2</a></li>
 <li><a href="javascript:setFocus1(3);" target="_self">3</a></li>
 <li>4</li>
 </ul>
 </div>
 </div>
 </div>
 </div>
</body>
</html>

网站上面有这种切换效果

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JSON.stringify 语法实例讲解
Mar 14 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
几句话带你理解JS中的this、闭包、原型链
Sep 26 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
accesskey 提交
Jun 26 #Javascript
Ctrl+Enter提交内容信息
Jun 26 #Javascript
漂亮的仿flash菜单，来自蓝色经典
Jun 26 #Javascript
经典的带阴影的可拖动的浮动层
Jun 26 #Javascript
些很实用且必用的小脚本代码
Jun 26 #Javascript
如果文字过长,则将过长的部分变成省略号显示
Jun 26 #Javascript
接收键盘指令的脚本
Jun 26 #Javascript
生命周期(1) into outfile(1) 异步机制(1) 限流器(1) springCloud(6) 死锁(3) reduce()(1) 远程连接(2) 逻辑备份(1) 轮询锁(1)
You might like
php 网上商城促销设计实例代码
2012/02/17 PHP
php处理文件的小例子(解压缩，删除目录)
2013/02/03 PHP
php缓存技术详细总结
2013/08/07 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
python time模块用法实例详解
2014/09/11 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
Smashbox英国官网：美国知名彩妆品牌
2017/11/13 全球购物
煤矿班组长竞聘书
2014/03/31 职场文书
厂区绿化方案
2014/05/08 职场文书
入职担保书范文
2014/05/21 职场文书
建筑安全生产责任书
2014/07/22 职场文书
生物工程专业求职信
2014/09/03 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
联谊活动总结范文
2015/05/09 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript