码迷，mamicode.com
首页 > 其他好文 > 详细

setTimeout应用 && 自动播放——幻灯片效果&& 自动改变方向——幻灯片效果

时间：2015-05-03 23:40:52      阅读：214      评论：0      收藏：0      [点我收藏+]

标签：

<!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;width: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;width:110px;margin-left:-2px;background-position:0 -108px;}
#nav ul li a{font-size:14px;color:#fff;width: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;width:auto!important;min-width: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;width: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;width:492px;height:172px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;}
#box .list{position:relative;width:490px;height:170px;overflow:hidden;border:1px solid #ccc;}
#box .list li{position:absolute;top:0;left:0;width: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;width: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{width: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;width:492px;height:172px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;}
#box .list{position:relative;width:490px;height:170px;overflow:hidden;border:1px solid #ccc;}
#box .list li{position:absolute;top:0;left:0;width: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;width: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{width: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>

 

setTimeout应用 && 自动播放——幻灯片效果&& 自动改变方向——幻灯片效果

标签：

原文地址：http://www.cnblogs.com/mayufo/p/4475002.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！