banner7

<!DOCTYPE html>
<html>

<head>
    <title>banner7</title>
    <script>
        //获取元素属性值
        function geyStyle(name, arrt) {
            if (name.currentStyle) {
                return name.currentStyle[arrt];
            } else {
                return getComputedStyle(name, false)[arrt];
            }
        }

        //完美运动框架
        function startMove(name, json, end) {
            clearInterval(name.timer);
            var stop = true;
            name.timer = setInterval(function () {
                for (const arrt in json) {
                    var cur = 0;
                    if (arrt == 'opacity') {
                        cur = cur = Math.round(parseFloat(geyStyle(name, arrt)) * 100);
                    } else {
                        cur = parseInt(geyStyle(name, arrt));
                    }

                    var spead;

                    spead = (json[arrt] - cur) / 10;
                    spead = spead > 0 ? Math.ceil(spead) : Math.floor(spead);

                    if (cur != json[arrt]) {
                        stop = false;
                        if (arrt == 'opacity') {
                            name.style[arrt] = (cur + spead) / 100;
                        } else {
                            name.style[arrt] = cur + spead + 'px';
                        }
                    }
                }
                if (stop == true) {
                    clearInterval(name.timer);
                    if (arrt == 'opacity') {
                        name.style[arrt] = json[arrt] / 100;
                    } else {
                        name.style[arrt] = json[arrt] + 'px';
                    }
                    if (end) end();
                }
            }, 17);
        }

        window.onload = function () {
            var oDiv = document.getElementById('play');
            var aBtn = oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li');
            var oUl = oDiv.getElementsByTagName('ul')[0];

            var now = 0;

            //数字选中
            for (let i = 0; i < aBtn.length; i++) {
                aBtn[i].onmouseover = function () {
                    now = aBtn[i].index = i;
                    tab();
                }
            }

            //切换图片及标签
            function tab() {
                if (now == aBtn.length) {
                    now = 0;
                } else if (now < 0) {
                    now = length - 1;
                }
                for (let i = 0; i < aBtn.length; i++) {
                    aBtn[i].className = '';
                }
                aBtn[now].className = 'active';
                startMove(oUl, { top: -150 * now });;
                now++;
            }

            //自动播放
            var timer = setInterval(tab, 2000);

            //鼠标移入停止播放
            oDiv.onmouseover = function () {
                clearInterval(timer);
            }
            oDiv.onmouseout = function () {
                timer = setInterval(tab, 2000);
            }
        }
    </script>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    li {
        list-style: none;
    }

    img {
        border: none;
    }

    body {
        background: #ecfaff;
    }

    .play {
        width: 470px;
        height: 150px;
        overflow: hidden;
        position: relative;
        margin: 150px auto 0;
    }

    .play .text {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 60px;
    }

    .play .text div {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: black;
        filter: alpha(opacity:40);
        opacity: 0.4;
        z-index: 99;
    }

    .play .text span {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        line-height: 60px;
        color: white;
        z-index: 999;
        text-align: center;
        font-size: 20px;
    }

    ol {
        position: absolute;
        right: 5px;
        bottom: 5px;
        z-index: 99999;
    }

    ol li {
        float: left;
        margin-right: 3px;
        display: inline;
        cursor: pointer;
        background: #fcf2cf;
        border: 1px solid #f47500;
        padding: 2px 6px;
        color: #d94b01;
        font-family: arial;
        font-size: 12px;
    }

    .active {
        padding: 3px 8px;
        font-weight: bold;
        color: #ffffff;
        background: #ffb442;
        position: relative;
        bottom: 2px;
    }

    ul {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

    ul li {
        width: 470px;
        height: 150px;
        float: left;
    }

    ul img {
        float: left;
        width: 470px;
        height: 150px;
    }
</style>

<body>

    <div class="play" id="play">
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        <ul>
            <li><a href="javascript:;"><img src="images/1.jpg" alt="广告一" /></a></li>
            <li><a href="javascript:;"><img src="images/2.jpg" alt="广告二" /></a></li>
            <li><a href="javascript:;"><img src="images/3.jpg" alt="广告三" /></a></li>
            <li><a href="javascript:;"><img src="images/4.jpg" alt="广告四" /></a></li>
            <li><a href="javascript:;"><img src="images/5.jpg" alt="广告五" /></a></li>
        </ul>
    </div>
</body>

</html>
banner7

推荐阅读更多精彩内容
