首页
所有分类
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 相关文章推荐
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
JavaScript中的变量作用域介绍
Dec 31 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
Json实现传值到后台代码实例
Jun 30 Javascript
JavaScript实现京东快递单号查询
Nov 30 Javascript
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
沙特阿拉伯购物网站(9) 土耳其购物网站(10) 欧洲购物网站(15) 波兰购物网站(52) 泰国购物网站(30) 阿联酋购物网站(26) 斯洛伐克购物网站(7) 智利购物网站(5) 奥地利购物网站(28) 哥伦比亚购物网站(5)
You might like
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
PHP 正则表达式小结
2015/02/12 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
在IE下：float属性会影响offsetTop的取值
2006/12/22 Javascript
JavaScript效率调优经验
2009/06/04 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
原生js实现移动小球（碰撞检测）
2020/12/17 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
Python pass详细介绍及实例代码
2016/11/24 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
python之语音识别speech模块
2020/09/09 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果（transform）
2017/11/06 HTML / CSS
Priority Pass机场贵宾室会籍计划：全球超过1200间机场贵宾室
2018/08/26 全球购物
aden + anais英国官网：美国婴儿贴身用品品牌
2019/09/08 全球购物
营销学习心得体会
2014/09/12 职场文书
产品质量保证书范本
2015/02/27 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js