首页
所有分类
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 相关文章推荐
javascript中的继承实例代码
Apr 27 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
JS获取网页图片name属性的方法
Apr 01 Javascript
js实现文本框选中的方法
May 26 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 Javascript
vue动态禁用控件绑定disable的例子
Oct 28 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
js代码实现轮播图
May 04 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
蒙特卡罗(1) pdfkit(1) map(4) 微信小程序(9) vue-esign(1) WeUI(1) bufio(1) 结构体(1) Pillow(2) 指针(1)
You might like
如何对PHP程序中的常见漏洞进行攻击（下）
2006/10/09 PHP
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
php max_execution_time执行时间问题
2011/07/17 PHP
php打造属于自己的MVC框架
2012/03/07 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
Python代码解决RenderView窗口not found问题
2016/08/28 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
python3.6实现学生信息管理系统
2019/02/21 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
python实现接口并发测试脚本
2019/06/25 Python
python web框架 django wsgi原理解析
2019/08/20 Python
python实现图片上添加图片
2019/11/26 Python
python中怎么表示空值
2020/06/19 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
python 动态绘制爱心的示例
2020/09/27 Python
浅析Python中字符串的intern机制
2020/10/03 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
2014年客房部工作总结
2014/11/22 职场文书
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis