`
shylhd
  • 浏览: 76775 次
  • 性别: Icon_minigender_2
  • 来自: 河北
最近访客 更多访客>>
xx5333
社区版块
存档分类
最新评论

js 新闻切换技术，163、msn那种

JavaScriptHTML算法XHTMLCSS 
阅读更多

<!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">&gt; 更多头图新闻</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>

 

分享到：
| js 漂亮的仿flash菜单，来自蓝色经典
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS新闻切换效果大全

    这个"JS新闻切换效果大全"包含18个不同的示例，旨在提供丰富的实践参考，帮助开发者理解和掌握这一技术。 1. **滑动切换**：这种效果常见于新闻滚动条，新闻条目会按照设定的方向（上下、左右）自动或手动滑动，...

    163图片新闻切换（html+js）

    【标题】"163图片新闻切换（html+js）" 涉及的核心知识点是网页动态效果的实现，主要通过HTML和JavaScript两种技术来完成。HTML（HyperText Markup Language）是网页的基础语言，用于构建网页结构；JavaScript则是一...

    JS新闻图片切换

    在这个“JS新闻图片切换”的主题中，我们将深入探讨如何利用JS实现类似腾讯手机版新闻图片的动态切换效果。 首先，这种图片切换效果通常是通过创建一个图片轮播组件来实现的。基本思路是将多张图片放在一个容器内，...

    javascript 新闻切换技术

    javascript 新闻切换技术是指使用javascript 语言实现的新闻切换技术，该技术主要应用于新闻网站、门户网站等，旨在提供一个灵活、快速、美观的新闻展示方式。下面将详细介绍javascript 新闻切换技术的实现原理、...

    js 新闻一条一条切换

    在JavaScript（JS）中实现新闻条目逐条切换的效果，是一种常见的网页动态效果，用于提升用户体验，让网站更具活力和互动性。这种效果通常应用于新闻、公告或滚动信息区域，使得用户无需手动翻页，就能自动浏览多条...

    js做的新闻图片切换效果

    在本文中，我们将深入探讨如何使用JavaScript实现新闻图片切换效果，这是一种常见的网页设计技术，能够为用户提供更丰富的视觉体验。 首先，我们需要理解基本的HTML结构，这是构建任何网页的基础。在新闻图片切换...

    js新闻焦点图切换代码

    JavaScript（简称JS）是一种轻量级的解释型编程语言，常用于网页和网络应用开发，实现动态内容、用户交互、页面行为控制等。在网页设计中，新闻焦点图（也称为轮播图或幻灯片）是常见的元素，用于展示多张图片或信息...

    FLASH图片切换、javascript图片切换

    "FLASH图片切换"和"javascript图片切换"是两种常用的技术手段，各有其特点和适用场景。 首先，我们来谈谈“FLASH图片切换”。Flash是一种由Adobe公司开发的多媒体创作平台，它曾广泛用于创建动画、交互式内容和网页...

    163图片新闻切换效果

    163图片新闻切换效果! 值得下载看看!资源免费,大家分享!!

    JS 层的切换JS 层的切换JS 层的切换JS 层的切换JS 层的切换JS 层的切换JS 层的切换JS 层的切换JS 层的切换JS 层的切换

    JS 层的切换JS 层的切换JS 层的切换JS 层的切换JS 层的切换JS 层的切换JS 层的切换JS 层的切换JS 层的切换JS 层的切换JS 层的切换JS 层的切换JS 层的切换JS 层的切换JS 层的切换JS 层的切换JS 层的切换JS 层的切换JS...

    MSN中国首页四屏切换新闻代码.rar

    【标题】"MSN中国首页四屏切换新闻代码.rar"揭示了这个压缩包内包含的是MSN中国首页曾经使用的一种新闻展示效果的源代码。这个效果可能是一个动态的新闻滚动或者焦点图，通过四屏切换的方式，使得用户能够在有限的...

    js点击按钮切换图片(完整源码)

    总之，“js点击按钮切换图片”这个示例是一个实用的教学资源，它不仅展示了如何使用JavaScript进行基本的交互操作，还为前端开发人员提供了实践和学习的机会。通过理解和应用这个例子，开发者可以提高他们的技能，并...

    新闻列表切换 js+css

    比较经典的新闻切换的前端案例代码，打开就能直接使用，能满足大多数应用需求

    JavaScript图片切换效果.rar

    JavaScript图片切换效果是一种常见的网页动态展示技术，常用于制作轮播图、相册或产品展示等。这种效果可以通过JavaScript库，如jQuery，或者原生JavaScript实现。本资源"JavaScript图片切换效果.rar"提供了一个实例...

    原生js时间日期选项卡图片新闻切换代码.rar

    原生js时间日期选项卡图片新闻切换代码的开发，涉及到前端开发中的核心技术栈，包括JavaScript的逻辑处理、DOM操作、事件处理，CSS的布局设计、样式定制以及HTML5的结构构建和数据存储。通过综合运用这些技术，...

    JavaScript图片切换展示效果.rar

    总的来说，实现JavaScript图片切换展示效果涉及到多方面的技术，包括DOM操作、事件处理、CSS样式控制以及数据管理和函数封装。通过学习和实践这个项目，开发者可以加深对JavaScript动态效果制作的理解，并提升网页...

    原生js代码制作图片新闻列表自动切换鼠标滑过新闻标题显示新闻图片

    在本文中，我们将深入探讨如何使用原生JavaScript来创建一个图片新闻列表，该列表能够自动切换，并在鼠标滑过新闻标题时显示相应的新闻图片。这个功能对于提升网站用户体验和交互性具有重要意义，尤其是在新闻资讯类...

    JavaScript实现tab栏切换效果

    JavaScript 实现的 Tab 切换效果是一种常见的网页交互设计，用于在不同的内容区域之间进行切换，通常用在页面顶部或侧边的导航菜单。在这个例子中，我们将详细讲解如何使用 JavaScript 和 CSS 实现这一功能。 首先...

    js半圆形banner切换动画效果

    JavaScript（简称JS）是一种轻量级的脚本语言，常用于网页和网络应用的开发，实现动态内容和交互性功能。在这个"js半圆形banner切换动画效果"的项目中，我们探讨的是如何利用JS来创建一种独特的视觉效果，即在Banner...

Magicbox
Global site tag (gtag.js) - Google Analytics