功能完整的js原生轮播图

来源：互联网发布：sql 别名用法编辑：程序博客网时间：2024/06/06 08:34

html:

 <div class="container">        <div class="list">            <img src="page3.png" alt="1">            <img src="page1.png" alt="2">            <img src="page2.png" alt="3">            <img src="page3.png" alt="4">            <img src="page1.png" alt="5">        </div>        <input class="prev btn" type="button" value="<">        <input class="next btn" type="button" value=">">        <div class="poins">            <span class="poin"></span>            <span class="poin"></span>            <span class="poin"></span>        </div>    </div>

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();            })        })

阅读全文

0 0