原生js轮播图

清水之昶

于 2019-07-13 22:29:34 发布

阅读量96

点赞数

分类专栏： Demo 文章标签： JavaScript

本文链接：https://blog.csdn.net/wq199909/article/details/95801833

版权

Demo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        /* 轮播图容器样式 */
        .wrapper{
            position: relative;
            margin: 100px auto 0;
            width: 300px;
            height: 400px;
            border: 1px solid black;
            overflow: hidden;
        }
        /* 整体图片容器 */
        .wrapper .slidePage{
            position: absolute;
            left: 0px;
            height: 400px;
            width: 1500px;
        }
        /* 图片容器 */
        .wrapper .slidePage li{
            height: 400px;
            width: 300px;
            float: left;
        }
        /* 图片 */
        .wrapper .slidePage li img{
            height: 100%;
            width: 100%;
        }
        /* 左右按钮 */
        .wrapper .btn{
            position: absolute;
            top: 50%;
            margin-top: -20px;
            width: 40px;
            height: 40px;
            background-color: #000;
            color: #fff;
            text-align: center;
            line-height: 40px;
            opacity: 0.1;
            cursor: pointer;
        }
        .wrapper:hover .btn{
            opacity: 0.7;
        }
        .wrapper .leftBtn{
            left: 15px;
        }
        .wrapper .rightBtn{
            right: 15px;
        }
        /* 索引圆点 */
        .wrapper .slideIndex{
            position: absolute;
            width: 100%;
            bottom: 15px;
            text-align: center;
            cursor: pointer;
        }
        .wrapper .slideIndex span{
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: #ccc;
            border-radius: 50%;
            margin-left: 10px;
        }
        .wrapper .slideIndex .active{
            background-color: #f40;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <ul class="slidePage">
            <li><img src="./src/img/1.jpg" alt=""></li>
            <li><img src="./src/img/2.jpg" alt=""></li>
            <li><img src="./src/img/3.jpg" alt=""></li>
            <li><img src="./src/img/4.jpg" alt=""></li>
            <li><img src="./src/img/1.jpg" alt=""></li>
        </ul>
        <div class="btn leftBtn">&lt;</div>
        <div class="btn rightBtn">&gt;</div>
        <div class="slideIndex">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script src = "./src/js/index.js"></script>
    <script>
        var timer = null;
        var slidePage = document.getElementsByClassName('slidePage')[0]; // 图片整体
        var leftBtn = document.getElementsByClassName('leftBtn')[0]; // 左移按钮
        var rightBtn = document.getElementsByClassName('rightBtn')[0]; // 右移按钮
        var oSpanArr = (document.getElementsByClassName('slideIndex')[0]).getElementsByTagName('span'); //小圆点数组
        var moveWidth = slidePage.children[0].offsetWidth; // 一次移动的距离
        var num = slidePage.children.length - 1; // 图片的种数
        var lock = true; // 锁
        /**
         * 锁的作用
         * 多次点击移动时，避免发生未移动到位的情况
         * 导致后来无法进行图片的循环
         */
        // direction 
        // 默认轮播方向 'left->right' / undefined
        // 点击left按钮 'right->left'
        function autoMove (direction) {
            if(lock){
                lock = false;
                clearTimeout(timer);
                // 清除计时器，防止点击操作导致多个定时器出现，图片轮播出现问题
                if(!direction || direction == 'left->right'){
                    startMove(slidePage, {left: slidePage.offsetLeft - moveWidth}, function(){
                        // 向右移动到最后一张图片时需要将图片位置移动为第一张
                        if(slidePage.offsetLeft == - num * moveWidth){
                            slidePage.style.left = '0px';
                        }
                        timer = setTimeout(autoMove, 1500);
                        lock = true;
                        changeIndex(-slidePage.offsetLeft/moveWidth);
                    })
                }else if(direction == 'right->left') {
                    // 向右移动前判断为第一张图片时需要将图片位置移动为最后一张
                    if(slidePage.offsetLeft == 0){
                        console.log(num*moveWidth)
                        slidePage.style.left = - num * moveWidth + 'px';
                    }
                    startMove(slidePage, {left: slidePage.offsetLeft + moveWidth}, function(){
                        timer = setTimeout(autoMove, 1500);
                        changeIndex(-slidePage.offsetLeft/moveWidth);
                        lock = true;
                    })
                }
            }
        }
        // 改变索引圆点类名来改变样式
        function changeIndex(_index){
            for(var i = 0; i < oSpanArr.length; i++){
                oSpanArr[i].className = '';
            }
            oSpanArr[_index].className = 'active';
        }
        // 开始轮播
        timer = setTimeout(autoMove, 1500);
        // 左移按钮事件
        leftBtn.onclick = function(){
            autoMove('right->left');
        }
        // 右移按钮事件
        rightBtn.onclick = function(){
            autoMove('left->right');
        }
        // 小圆点添加点击事件
        for(var i = 0; i < oSpanArr.length; i++){
            (function(i){
                oSpanArr[i].onclick = function(){
                    lock = false;
                    clearTimeout(timer);
                    index = i;
                    startMove(slidePage, {left: - index * moveWidth}, function(){
                        lock = true;
                        tiemr = setTimeout(autoMove, 1500);
                        changeIndex(index);
                    })
                }
            }(i))
        }
    </script>
</body>
</html>

index.js


// js获取元素样式的方法
function getStyle(dom, attr) {
　　if(dom.currentStyle){　　
　　　　return dom.currentStyle[attr];　　//IE
　　}else{
　　　　return getComputedStyle(dom, false)[attr];　　//chrome,firefox,safari,opera
　　}
}
// 弹性运动
function startMove(dom, attrObj, callback) {
    clearInterval(dom.timer); // 开定时器之前先关掉原有的计时器
    dom.timer = setInterval(function() {
        var bStop = true;
        for(var attr in attrObj){
            // 取出当前值
            var iCur = 0;
            if(attr === 'opacity') {
                iCur = parseFloat( getStyle(dom, attr) ) * 100;
            } else {
                iCur = parseInt( getStyle(dom, attr) );
            }
            // 计算速度
            var iSpeed = (attrObj[attr] - iCur) / 8;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
            // 修改dom属性
            if(attr == 'opacity') {
                dom.style.opacity = (iCur + iSpeed) / 100;
            } else {
                dom.style[attr] = iCur + iSpeed +'px';
            }
            // 检测停止
            if(iCur != attrObj[attr]) {
                bStop = false;
            }
            if(bStop) {
                clearInterval(dom.timer);
                typeof callback == 'function' ? callback() : '';
            }
        }
    },30)
}

效果展示：