<!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=utf-8" /> <title>setTimeout应用</title> <style> body,div,ul,li,p{margin:0;padding:0;} body{font:12px/1.5 Arial;} ul{list-style-type:none;} #nav,#nav ul,#nav ul li,#nav ul li a:hover,#nav .subnav,#nav .subnav p,#nav .subnav p span,#nav .subnav .arrow{background:url(img/nav_bg.png) no-repeat;} #nav{position:relative;910px;background-position:0 -36px;margin:10px auto;} #nav ul{height:36px;line-height:36px;margin-left:10px;padding-right:10px;overflow:hidden;background-position:right -72px;} #nav ul li{float:left;110px;margin-left:-2px;background-position:0 -108px;} #nav ul li a{font-size:14px;color:#fff;102px;display:block;text-align:center;text-decoration:none;margin:0 2px 0 4px;} #nav ul li a:hover{font-weight:700;background-position:-3px -144px;} #nav .subnav{display:none;position:absolute;top:41px;auto!important;min-110px;height:27px;line-height:27px;white-space:nowrap;background-position:0 -180px;} #nav .subnav p{margin-left:10px;padding-right:10px;background-position:right -234px;} #nav .subnav p span{display:block;color:#235e99;background-repeat:repeat-x;background-position:0 -207px;} #nav .subnav p a{font-size:12px;display:inline;color:#235e99;text-decoration:none;margin:0 5px;padding:0 2px;} #nav .subnav p a:hover{font-weight:400;background-image:none;border-bottom:2px solid;} #nav .subnav .arrow{position:absolute;top:-4px;display:block;11px;height:5px;background-position:0 -261px;} </style> <script type="text/javascript"> var get = { byId: function(id) { return document.getElementById(id) }, byClass: function(sClass, oParent) { var aClass = []; var reClass = new RegExp("(^| )" + sClass + "( |$)"); var aElem = this.byTagName("*", oParent); for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]); return aClass }, byTagName: function(elem, obj) { return (obj || document).getElementsByTagName(elem) } }; window.onload = function () { var oNav = get.byId("nav"); var aLi = get.byTagName("li", oNav); var aSubNav = get.byClass("subnav", oNav); var oSubNav = oEm = timer = null; var i = 0; for (i = 1; i < aLi.length; i++) { aLi[i].onmouseover = function () { //隐藏所有子菜单 for (i = 0; i < aSubNav.length; i++)aSubNav[i].style.display = "none"; //获取该项下的子菜单 oSubNav = get.byClass("subnav", this)[0]; //获取该项下的指示箭头 oEm = get.byTagName("em", this)[0]; //显示该项下的子菜单 oSubNav.style.display = "block"; //判断显示区域 oNav.offsetWidth - this.offsetLeft > oSubNav.offsetWidth ? //如果在显示范围居左显示 oSubNav.style.left = this.offsetLeft + "px" : //超出显示范围居右显示 oSubNav.style.right = 0; //计算指标箭头显示位置 oEm.style.left = this.offsetLeft - oSubNav.offsetLeft + 50 + "px"; clearTimeout(timer); //阻止事件冒泡 oSubNav.onmouseover = function (event) { (event || window.event).cancelBubble = true; clearTimeout(timer) } }; aLi[i].onmouseout = function () { timer = setTimeout(function () { oSubNav.style.display = "none" },300) } } }; </script> </head> <body> <div id="nav"> <ul> <li><a href="javascript:;">站长之家</a></li> <li> <a href="javascript:;">行业资讯</a> <div class="subnav"> <em class="arrow"></em> <p> <span> <a href="javascript:;">业界动态</a>| <a href="javascript:;">收购融资</a>| <a href="javascript:;">门户动态</a>| <a href="javascript:;">搜索引擎</a>| <a href="javascript:;">网络游戏</a>| <a href="javascript:;">电子商务</a>| <a href="javascript:;">广告传媒</a>| <a href="javascript:;">厂商开发</a> </span> </p> </div> </li> <li> <a href="javascript:;">站长在线</a> <div class="subnav"> <em class="arrow"></em> <p> <span> <a href="javascript:;">站长报道</a>| <a href="javascript:;">好站推荐</a>| <a href="javascript:;">站长聚会</a>| <a href="javascript:;">站长访谈</a>| <a href="javascript:;">站长茶馆</a>| <a href="javascript:;">网站排行</a> </span> </p> </div> </li> <li> <a href="javascript:;">网站运营</a> <div class="subnav"> <em class="arrow"></em> <p> <span> <a href="javascript:;">建站经验</a>| <a href="javascript:;">策划盈利</a>| <a href="javascript:;">搜索优化</a>| <a href="javascript:;">网站推广</a>| <a href="javascript:;">免费资源</a> </span> </p> </div> </li> <li> <a href="javascript:;">设计在线</a> <div class="subnav"> <em class="arrow"></em> <p> <span> <a href="javascript:;">酷站推荐</a>| <a href="javascript:;">网页设计</a>| <a href="javascript:;">WEB标准</a>| <a href="javascript:;">视频处理</a>| <a href="javascript:;">设计活动</a> </span> </p> </div> </li> <li> <a href="javascript:;">网络编程</a> <div class="subnav"> <em class="arrow"></em> <p> <span> <a href="javascript:;">Asp编程</a>| <a href="javascript:;">Php编程</a>| <a href="javascript:;">.Net编程</a>| <a href="javascript:;">Xml编程</a>| <a href="javascript:;">Access</a>| <a href="javascript:;">Mssql</a>| <a href="javascript:;">Mysql</a> </span> </p> </div> </li> <li> <a href="javascript:;">联盟资讯</a> <div class="subnav"> <em class="arrow"></em> <p> <span> <a href="javascript:;">联盟动态</a>| <a href="javascript:;">联盟介绍</a>| <a href="javascript:;">联盟点评</a>| <a href="javascript:;">网赚技巧</a> </span> </p> </div> </li> <li> <a href="javascript:;">服务器</a> <div class="subnav"> <em class="arrow"></em> <p> <span> <a href="javascript:;">Web服务器</a>| <a href="javascript:;">Ftp服务器</a>| <a href="javascript:;">Mail服务器</a>| <a href="javascript:;">Dns服务器</a>| <a href="javascript:;">Win服务器</a>| <a href="javascript:;">Linux服务器</a>| <a href="javascript:;">安全防护</a>| <a href="javascript:;">虚拟主机</a> </span> </p> </div> </li> </ul> </div> </body> </html>
自动播放——幻灯片效果
<!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=utf-8" /> <title>自动播放——幻灯片效果</title> <style> body,div,ul,li{margin:0;padding:0;} ul{list-style-type:none;} body{background:#000;text-align:center;font:12px/20px Arial;} #box{position:relative;492px;height:172px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;} #box .list{position:relative;490px;height:170px;overflow:hidden;border:1px solid #ccc;} #box .list li{position:absolute;top:0;left:0;490px;height:170px;opacity:0;filter:alpha(opacity=0);} #box .list li.current{opacity:1;filter:alpha(opacity=100);} #box .count{position:absolute;right:0;bottom:5px;} #box .count li{color:#fff;float:left;20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;} #box .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;} #tmp{100px;height:100px;background:red;position:absolute;} </style> <script type="text/javascript"> window.onload = function () { var oBox = document.getElementById("box"); var aUl = document.getElementsByTagName("ul"); var aImg = aUl[0].getElementsByTagName("li"); var aNum = aUl[1].getElementsByTagName("li"); var timer = play = null; var i = index = 0; //切换按钮 for (i = 0; i < aNum.length; i++) { aNum[i].index = i; aNum[i].onmouseover = function () { show(this.index) } } //鼠标划过关闭定时器 oBox.onmouseover = function () { clearInterval(play) }; //鼠标离开启动自动播放 oBox.onmouseout = function () { autoPlay() }; //自动播放函数 function autoPlay () { play = setInterval(function () { index++; index >= aImg.length && (index = 0); show(index); },2000); } autoPlay();//应用 //图片切换, 淡入淡出效果 function show (a) { index = a; var alpha = 0; for (i = 0; i < aNum.length; i++)aNum[i].className = ""; aNum[index].className = "current"; clearInterval(timer); for (i = 0; i < aImg.length; i++) { aImg[i].style.opacity = 0; aImg[i].style.filter = "alpha(opacity=0)"; } timer = setInterval(function () { alpha += 2; alpha > 100 && (alpha =100); aImg[index].style.opacity = alpha / 100; aImg[index].style.filter = "alpha(opacity = " + alpha + ")"; alpha == 100 && clearInterval(timer) },20); } }; </script> </head> <body> <div id="box"> <ul class="list"> <li class="current"><img src="img/01.jpg" width="490" height="170" /></li> <li><img src="img/02.jpg" width="490" height="170" /></li> <li><img src="img/03.jpg" width="490" height="170" /></li> <li><img src="img/04.jpg" width="490" height="170" /></li> <li><img src="img/05.jpg" width="490" height="170" /></li> </ul> <ul class="count"> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html>
自动改变方向——幻灯片效果
<!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=utf-8" /> <title>自动改变方向——幻灯片效果</title> <style> body,div,ul,li{margin:0;padding:0;} ul{list-style-type:none;} body{background:#000;text-align:center;font:12px/20px Arial;} #box{position:relative;492px;height:172px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;} #box .list{position:relative;490px;height:170px;overflow:hidden;border:1px solid #ccc;} #box .list li{position:absolute;top:0;left:0;490px;height:170px;opacity:0;filter:alpha(opacity=0);} #box .list li.current{opacity:1;filter:alpha(opacity=100);} #box .count{position:absolute;right:0;bottom:5px;} #box .count li{color:#fff;float:left;20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;} #box .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;} #tmp{100px;height:100px;background:red;position:absolute;} </style> <script type="text/javascript"> window.onload = function () { var oBox = document.getElementById("box"); var aUl = document.getElementsByTagName("ul"); var aImg = aUl[0].getElementsByTagName("li"); var aNum = aUl[1].getElementsByTagName("li"); var timer = play = null; var i = index = 0; var bOrder = true; //切换按钮 for (i = 0; i < aNum.length; i++) { aNum[i].index = i; aNum[i].onmouseover = function () { show(this.index) } } //鼠标划过关闭定时器 oBox.onmouseover = function () { clearInterval(play) }; //鼠标离开启动自动播放 oBox.onmouseout = function () { autoPlay() }; //自动播放函数 function autoPlay () { play = setInterval(function () { //判断播放顺序 bOrder ? index++ : index--; //正序 index >= aImg.length && (index = aImg.length - 2, bOrder = false); //倒序 index <= 0 && (index = 0, bOrder = true); //调用函数 show(index) },2000); } autoPlay();//应用 //图片切换, 淡入淡出效果 function show (a) { index = a; var alpha = 0; for (i = 0; i < aNum.length; i++)aNum[i].className = ""; aNum[index].className = "current"; clearInterval(timer); for (i = 0; i < aImg.length; i++) { aImg[i].style.opacity = 0; aImg[i].style.filter = "alpha(opacity=0)"; } timer = setInterval(function () { alpha += 2; alpha > 100 && (alpha =100); aImg[index].style.opacity = alpha / 100; aImg[index].style.filter = "alpha(opacity = " + alpha + ")"; alpha == 100 && clearInterval(timer) },20); } }; </script> </head> <body> <div id="box"> <ul class="list"> <li class="current"><img src="img/01.jpg" width="490" height="170" /></li> <li><img src="img/02.jpg" width="490" height="170" /></li> <li><img src="img/03.jpg" width="490" height="170" /></li> <li><img src="img/04.jpg" width="490" height="170" /></li> <li><img src="img/05.jpg" width="490" height="170" /></li> </ul> <ul class="count"> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html>