用原生JavaScript实现简单轮播图

野性酷女 2022-05-27 11:20 160阅读 0赞

**html代码**

**css代码**

* {
                margin: 0;
                padding: 0;
            }
    
            ul, li {
                list-style: none;
            }
    
            #banner {
                width: 800px;
                height: 400px;
                margin: 40px auto;
                position: relative;
                overflow: hidden;
            }
    
            #banner > ul {
                position: absolute;
            }
    
            #banner > ul > li {
                float: left;
                width: 800px;
                height: 400px;
            }
    
            #banner > ul > li > img {
                width: 800px;
                height: 400px;
            }
    
            #direction {
                position: relative;
                display: none;
            }
    
            #direction > a {
                position: absolute;
                width: 60px;
                height: 60px;
                text-align: center;
                line-height: 55px;
                color: #fff;
                text-decoration: none;
                background: rgba(0, 0, 0, .5);
                font-size: 40px;
                top: 170px;
                opacity: 0.5;
                border-radius: 50%;
            }
    
            #direction > a:nth-child(2) {
                right: 0;
            }
    
            #btn {
                position: absolute;
                bottom: 0;
                left: 340px;
            }
    
            #btn > a {
                float: left;
                margin-left: 10px;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background: #f40;
            }
    
            #btn > .active {
                background: #fff;
            }

**JS代码**

封装运动框架

// 完美运动框架
    function move(obj, json, fn) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var bStop = true;
            for (var attr in json) {
                //先判断是否是透明度
                var iCur;
                if (attr == "opacity") {
                    iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
                } else {
                    iCur = parseInt(getStyle(obj, attr));
                }
                //算速度
                var speed = (json[attr] - iCur) / 8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    
                if (json[attr] != iCur) {
                    bStop = false;
                }
                if (attr == "opacity") {
                    obj.style.opacity = (iCur + speed) / 100;
                    obj.style.filter = "alpha(opacity:" + (iCur + speed) + ")"
                } else {
                    obj.style[attr] = iCur + speed + 'px';
                }
            }
            if (bStop) {
                clearInterval(obj.timer);
                fn && fn();
            }
        }, 30)
    }