js实现幻灯片自动切换

最新推荐文章于 2024-10-18 15:05:11 发布

cgt_0812

最新推荐文章于 2024-10-18 15:05:11 发布

阅读量2.7k

点赞数

<!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>自动播放的JavaScript幻灯片效果</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="/jscss/demoimg/201208/01.jpg" width="490" height="170" /></li>
        <li><img src="/jscss/demoimg/201208/02.jpg" width="490" height="170" /></li>
        <li><img src="/jscss/demoimg/201208/03.jpg" width="490" height="170" /></li>
        <li><img src="/jscss/demoimg/201208/04.jpg" width="490" height="170" /></li>
        <li><img src="/jscss/demoimg/201208/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>