js轮播图,纯源码-蒲公英云

js轮播图,纯源码

最近也是在学js所以就做了个轮播图来玩玩

CSS-------------------
* { 
    padding: 0;
    margin: 0;
}
.box img { 
    width: 700px;
    height: 400px;
}
.box { 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    width: 700px;
    height: 400px;
    overflow: hidden;
    /* border: 2px solid red; */
}
.box1 { 
    position: absolute;
    height: 400px;
    display: flex;
}
.left { 
    position: absolute;
    background-color: black;
    width: 30px;
    height: 40px;
    opacity: .7;
    top: 190px;
    cursor: pointer;
    z-index: 22;
}
.right { 
    position: absolute;
    background-color: black;
    width: 30px;
    height: 40px;
    opacity: .7;
    right: 0px;
    top: 190px;
    cursor: pointer;
    z-index: 22;
}
.circle { 
    border-radius: 50%;
    position: absolute;
    left: 300px;
    bottom: 10px;
    display: flex;
}
.circle li { 
    list-style: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: pink;
    margin-left: 5px;
    cursor: pointer;
}

JS代码

window.onload = function() { 
    //获取元素
    var box = document.querySelector('.box')
    var img = document.querySelectorAll('img')
    var left = document.querySelector('.left')
    var right = document.querySelector('.right')
    var box1 = document.querySelector('.box1')
    var circle = document.querySelector('.circle')
        //拿到图片的宽度
    var imgwdith = 700;
    // 动态设置box1长度
    box1.style.width = (img[0].offsetWidth * img.length) + 'px';
    //左右移动时使用的变量num
    var num = 0;
    //圆圈使用的变量o
    var o = 0;
    // 动态创建圆圈,与图片数量保持一致
    for (var i = 0; i < img.length - 1; i++) { 
        var lis = document.createElement('li');
        //设置索引
        var index = lis.setAttribute('index', i);
        circle.appendChild(lis);
        // 给li添加点击事件
        circle.children[i].onclick = function() { 
            for (var i = 0; i < circle.children.length; i++) { 
                circle.children[i].style.backgroundColor = 'pink';
            }
            this.style.backgroundColor = 'white';
            //获取li的索引
            var index = this.getAttribute('index');
            //index控制
            num = index;
            o = index;
            animateW(box1, -index * imgwdith);
        }
    };
    circle.children[0].style.backgroundColor = 'white';
    //绑定右侧的点击事件
    right.onclick = function() { 
        if (num == img.length - 1) { 
            box1.style.left = 0 + 'px';
            num = 0;
        }
        num++;
        animateW(box1, -num * imgwdith);
        o++;
        //圆圈跟着动
        //如果到最后一个就回到0;
        if (o == circle.children.length) { 
            o = 0;
            circle.children[o].style.backgroundColor = 'white'
        }
        circlecss();
    };
    //绑定左侧的点击事件
    left.onclick = function() { 
        if (num == 0) { 
            num = img.length - 1;
            box1.style.left = -num * img.length + 'px';
        }
        num--;
        animateW(box1, -num * imgwdith);
        o--;
        //圆圈跟着动
        //如果是第一个,点击之后变成最后一个;
        if (o < 0) { 
            o = circle.children.length - 1;
        }
        circlecss();
    };
    //自动播放
    // 周期调用已经绑定事件的元素
    var int = setInterval(right.onclick, 2000);
    // 移入到容器中清除自动点击事件
    box.onmouseover = function() { 
            clearInterval(int);
        }
        // 移出容器的时候继续调用自动点击的事件
    box.onmouseout = function() { 
        int = setInterval(right.onclick, 2000);
    }
    //圆圈的样式变化函数
    function circlecss() { 
        for (var i = 0; i < circle.children.length; i++) { 
            circle.children[i].style.backgroundColor = "pink";
        }
        circle.children[o].style.backgroundColor = 'white';
    };
    // 动画函数
    function animateW(obj, target) { 
        //先把原先的定时器清除,只保留一个.
        clearInterval(obj.time);
        obj.time = setInterval(function() { 
            //步长 公式:(目标位置-现在的位置)/10 
            var step = (target - obj.offsetLeft) / 10;
            step = step <= 0 ? Math.floor(step) : Math.ceil(step);
            if (obj.offsetLeft == target) { 
                clearInterval(obj.time);
            }
            obj.style.left = obj.offsetLeft + step + 'px';
        }, 15);
    };
}

HTML———

</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="box1">
            <img src="image/1.jpg" alt="">
            <img src="image/2.jpg" alt="">
            <img src="image/3.jpg" alt="">
            <img src="image/4.jpg" alt="">
            <img src="image/5.jpg" alt="">
            <img src="image/1.jpg" alt="">
        </div>
        <ol class="circle">
        </ol>
    </div>
</body>