当前位置:Gxlcms > JavaScript > 原生js组件化开发简单轮播图实例代码

原生js组件化开发简单轮播图实例代码

时间:2021-07-01 10:21:17 帮助过:14人阅读

<!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>
        .banner {
            overflow: hidden;
            position: relative;
        }
        ul,
        ol,
        li {
            padding: 0;
            margin: 0;
            left: 0;
            top: 0;
            list-style: none;
        }
        .trans{
            transition: all .3s ease;
        }
        .banner-wraper {
            position: absolute;
            left: 0;
            top: 0;
            
        }
        .banner-wraper .banner-item {
            float: left;
            width: 900px;
            height: 400px;
            background: yellow;
        }
        .banner-wraper .banner-item:nth-child(3) {
            background: blue;
        }
        .banner-wraper .banner-item:nth-child(2n) {
            background: green;
        }
        .navigation {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 90%;
        }
        .nav-item {
            width: 10px;
            height: 10px;
            background: #000;
            display: inline-block;
            margin: 0 5px;
        }
        .nav-item:hover {
            cursor: pointer;
            opacity: 0.4;
        }
        .navigation .active {
            opacity: 0.4;
        }
    </style>
</head>
<body>
    <p class="banner" id="swiper">
        <ul class="banner-wraper trans">
            <li class="banner-item"></li>
            <li class="banner-item"></li>
            <li class="banner-item"></li>
            <li class="banner-item"></li>
            <li class="banner-item"></li>
            <li class="banner-item"></li>
        </ul>
        <ol class="navigation">
        </ol>
    </p>
    <!-- <script src="./jquery.js"></script> -->
    <script>
        (function (win, doc) {
            function Swiper(options) {
                return new Swiper.prototype.init(options);
            }
            Swiper.prototype.init = function (options) {
                // 初始化方法配置
                this.options = options;
                this.options.delay = options.delay || 4000;
                this.options.autoPlay = options.autoPlay || false;
                this.banner = doc.querySelector(this.options.el);
                this.bannerWraper = this.banner.querySelector('.banner-wraper');
                this.bannerItem = this.banner.querySelectorAll('.banner-item');
                this.bannerW = this.bannerItem[0].offsetWidth;//轮播图宽度;
                this.banner.style.width = this.bannerW + 'px';//根据item大小定义轮播图容器宽度
                this.banner.style.minHeight = this.bannerItem[0].offsetHeight + 'px';//根据item大小定义轮播图容器高度
                this.bannerWraper.style.width = this.bannerW * this.bannerItem.length + 'px';
                this.bannerItem[0].className = 'banner-item active';
                this.navigationItem = null;
                // 定义当前页码索引
                this.index = 0;
                this.speed = null;
                //定时器
                this.timer = null;
                this.init(this.options);
            }
            Swiper.fn = Swiper.prototype.init.prototype;
            Swiper.fn.init = function () {
                var speed = getComputedStyle(this.bannerWraper, false).transition;
                speed = speed.split(' ')[1];
                this.speed = (+speed.substring(0,speed.length-1)) * 1000;
                //   console.log(this.speed,'speed');
                // 初始化功能函数
                this.initNavigation();
                this.changeActive();
                // 鼠标移入清除自动播放
                this.clearTimer();
                if (this.options.loop) this.loop();
                if (this.options.autoPlay) this.autoPlay();
                               
            }
            //初始化分页按钮
            Swiper.fn.initNavigation = function () {
                var navigation = doc.querySelector('.navigation');
                var navigationItem = '';
                for (var i = 0, len = this.bannerItem.length; i < len; ++i) {
                    if (i === 0) {
                        navigationItem += '<p class="nav-item active"></p>';
                    } else {
                        navigationItem += '<p class="nav-item"></p>';
                    }
                }
                navigation.innerHTML = navigationItem;
                this.navigationItem = doc.querySelectorAll('.nav-item');
            }
            Swiper.fn.changeActive = function () {
                var _this = this;
                for (var i = 0, len = _this.navigationItem.length; i < len; ++i) {
                    (function (i) {// 闭包保存i值
                        _this.navigationItem[i].onclick = function () {
                            _this.index = i;
                            _this.changeMain(this);
                        }
                    })(i);
                }
            }
            Swiper.fn.changeMain = function (This) {
                // console.log(this.index);
                var _this = this;
                if(this.options.loop && this.index == 0) {
                    this.index = this.navigationItem.length;   
                };
                for (var j = 0, len = this.navigationItem.length; j < len; ++j) {
                    this.navigationItem[j].className = 'nav-item'
                }
                This.className = 'nav-item active';// 当前_this指向 li
                this.bannerWraper.style.left = - this.bannerW * this.index + 'px';
                // console.log(this.index,'this.index');
                if(this.options.loop && this.index == this.navigationItem.length){
                    setTimeout(function(){
                        _this.bannerWraper.className = 'banner-wraper';
                        _this.bannerWraper.style.left = 0;
                        setTimeout(function(){
                            _this.bannerWraper.className = 'banner-wraper trans';
                        }, _this.speed/2);
                    }, _this.speed);
                }
            }
            //自动播放
            Swiper.fn.autoPlay = function () {
                var _this = this;
                var len = _this.navigationItem.length;
                this.options.loop === true ? len : len = len - 1;
                this.timer = setInterval(function () {
                    if (_this.index >= len) {
                        _this.index = 0;
                    } else {
                        _this.index++;
                    }
                    _this.changeMain(_this);
                    if(_this.options.loop && _this.index === len){
                        _this.index = 0;
                        _this.navigationItem[_this.index].className = 'nav-item active';
                        setTimeout(function(){
                            _this.bannerWraper.className = 'banner-wraper';
                            console.log(1)
                            _this.bannerWraper.style.left = 0;
                            setTimeout(function(){
                                console.log(2)
                                _this.bannerWraper.className = 'banner-wraper trans';
                            }, _this.speed/2);
                        }, _this.speed);
                        return;
                    }
                    _this.navigationItem[_this.index].className = 'nav-item active';
                }, this.options.delay);
            }
            // 鼠标移入/移出 => 清除/重启定时器
            Swiper.fn.clearTimer = function () {
                var _this = this;
                this.banner.onmouseover = function () {
                    clearInterval(_this.timer);
                    _this.timer = null;
                }
                this.banner.onmouseout = function () {
                    if (_this.options.autoPlay) _this.autoPlay();
                }
            }
            Swiper.fn.loop = function() {
                var htmlObjConvertStr = function(htmlObj){
                    var pContainer = document.createElement('p');
                    pContainer.appendChild(htmlObj);
                    return pContainer.innerHTML;
                };
                var _bannerHtml = this.bannerWraper.innerHTML;
                this.bannerWraper.innerHTML = _bannerHtml + htmlObjConvertStr(this.bannerItem[0]);
                this.bannerItem = this.banner.querySelectorAll('.banner-item');
                this.bannerWraper.style.width = this.bannerW * this.bannerItem.length + 'px';// 修正banenrWraper宽度
                this.bannerItem[this.bannerItem.length - 1].className = 'banner-item';// 修正末尾banner-item类名
            }
            Swiper.fn.constructor = Swiper;// 修正contructor指向
            win.Swiper = Swiper;// 将swiper挂载到window对象
        })(window, document);
        Swiper({
            el: '#swiper',
            autoPlay: true, // 默认为false不自动播放
            delay: 3000, // 默认为4s
            loop: true
        });
    </script>
</body>
</html>
本篇介绍了原生js组件化开发简单轮播图实例代码,更多相关内容请关注Gxl网。
相关推荐:
前端调用微信支付接口



以上就是原生js组件化开发简单轮播图实例代码的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行