功能完整的js原生轮播图

html:

css:

  * {
            padding: 0;
            margin: 0;
            text-decoration: none;
            font-size: 0;
        }



        .container {
            position: relative;
            width: 100%;
            height: 570px;
            /*border:1px solid red;*/
            overflow: hidden;
        }


        .list {
            position: absolute;
            z-index: 1;
            width: 500%;
            height: 570px;
            left: -1920px;
            top: 0;
            cursor: pointer;
            /*transition: all 1s;*/
        }




        .list img {
            float: left;
            width: 20%;
            height: 570px;
        }




        .btn {
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 30px;
            color: red;
            background-color: rgba(0, 0, 0, .6);
            z-index: 1000;

            cursor: pointer;
            outline: none;
        }




        .prev {
            left: 150px;
        }




        .next {
            right: 150px;
        }


        .poins {
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0);


            top: 520px;
            z-index: 3;
        }


        .poin {
            margin-left: 10px;
            margin-right: 10px;
            display: inline-block;
            width: 50px;
            height: 5px;
            border-radius: 25%;
            background-color: lightgrey;
            cursor: pointer;
        }


        .active {
            background-color: orange;
        }

js:

var index = 1;
        var poins = document.querySelectorAll('.poin');
       
        init();
        var timer;
        //自动切换函数
        function play() {
            timer = setInterval(function () {
                index = index == 3 ? 1 : index + 1;//调整索引
                animation(-1920);//利用动画函数进行位移
                showPoin();//切换原点颜色
            }, 2000);
        }
        play();
        //动画函数
        function animation(offset, callback) {
            var list = document.querySelector('.list');
            var newLeft = parseInt(getComputedStyle(list)['left']) + offset;
            var time = 400;
            var interval = 10;
            var speed = offset / (time / interval);
            function start() {
                done = true;
                var cur = parseInt(getComputedStyle(list)['left']);
                // console.log(speed, cur, newLeft);
                if ((speed < 0 && parseInt(getComputedStyle(list)['left']) > newLeft) || (speed > 0 && parseInt(getComputedStyle(list)['left']) < newLeft)) {
                    list.style.left = parseInt(getComputedStyle(list)['left']) + speed + 'px';
                    setTimeout(start, interval);
                }
                else {
                    done = false;
                    list.style.left = newLeft + 'px';
                    if (newLeft > -1920) {
                        list.style.left = -5760 + 'px';
                    }
                    if (newLeft < -5760) {
                        list.style.left = -1920 + 'px'
                    }
                    callback && callback();
                }
            }
            start();

        }
        var next = document.querySelector('.next');
        var prev = document.querySelector('.prev');
        //左右按钮
        next.addEventListener('click', throote(function () {
            index = index === 3 ? 1 : index + 1;//调整索引
            clearInterval(timer);//清楚计时器
            animation(-1920);//利用动画函数进行位移
            play();//重设计时器
            showPoin();//小圆点根据当前索引切换颜色
        }, 500))
        prev.addEventListener('click', throote(function () {
            index = index === 1 ? 3 : index - 1
            clearInterval(timer);
            animation(1920);
            play();
            showPoin();
        }, 500))
        //防抖函数
        function throote(fn, time) {
            var start = Date.now();
            return function () {
                var end = Date.now();
                if (end - start < time) {
                    return;
                }
                fn.apply(null, arguments);
                start = end;
            }
        }
        //鼠标移入自动切换停止
        //移出继续自动切换
        var list = document.querySelector('.list');
        list.addEventListener('mouseover', function () {
            clearInterval(timer);
        })
        list.addEventListener('mouseout', function () {
            play();
        })
        //小圆点

        //初始化
        function init() {
            for (var i = 0; i < poins.length; i++) {
                poins[i].index = i + 1;
            }
            poins[index - 1].className = 'poin active';

        }
        //圆点颜色切换
        function showPoin() {
            for (var i = 0; i < poins.length; i++) {
                console.log(poins[i].className);
                if (/active/g.test(poins[i].className)) {
                    poins[i].className = poins[i].className.replace(/active/g, '');
                    break;
                }
            }
            poins[index - 1].className = 'poin active';
        }
        //圆点点击事件
        poins.forEach(function (item) {
            console.log(item);
            item.addEventListener('click', function () {
                var offset = (this.index - index) * -1920;
                animation(offset);
                index = this.index;
                showPoin();
            })
            item.addEventListener('mouseover', function () {
                clearInterval(timer);
            })
            item.addEventListener('mouseout', function () {
                play();
            })
        })