原生js组件化开发简单轮播图的示例分析-创新互联

小编给大家分享一下原生js组件化开发简单轮播图的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

创新互联是专业的马鞍山网站建设公司,马鞍山接单;提供网站建设、网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行马鞍山网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
<!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组件化开发简单轮播图的示例分析”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。

当前名称:原生js组件化开发简单轮播图的示例分析-创新互联
标题来源:https://www.cdcxhl.com/article36/doohsg.html

成都网站建设公司_创新互联,为您提供网站内链品牌网站制作网站设计公司用户体验App开发网站排名

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

手机网站建设