Home >Web Front-end >Front-end Q&A >Example code for simple carousel chart development using native js components

Example code for simple carousel chart development using native js components

jackloveOriginal: 2018-06-11 22:58:582786browse

<!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(&#39;.banner-wraper&#39;);
                this.bannerItem = this.banner.querySelectorAll(&#39;.banner-item&#39;);
                this.bannerW = this.bannerItem[0].offsetWidth;//轮播图宽度;
                this.banner.style.width = this.bannerW + &#39;px&#39;;//根据item大小定义轮播图容器宽度
                this.banner.style.minHeight = this.bannerItem[0].offsetHeight + &#39;px&#39;;//根据item大小定义轮播图容器高度
                this.bannerWraper.style.width = this.bannerW * this.bannerItem.length + &#39;px&#39;;
                this.bannerItem[0].className = &#39;banner-item active&#39;;
                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(&#39; &#39;)[1];
                this.speed = (+speed.substring(0,speed.length-1)) * 1000;
                //   console.log(this.speed,&#39;speed&#39;);
                // 初始化功能函数
                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(&#39;.navigation&#39;);
                var navigationItem = &#39;&#39;;
                for (var i = 0, len = this.bannerItem.length; i < len; ++i) {
                    if (i === 0) {
                        navigationItem += &#39;<p class="nav-item active"></p>&#39;;
                    } else {
                        navigationItem += &#39;<p class="nav-item"></p>&#39;;
                    }
                }
                navigation.innerHTML = navigationItem;
                this.navigationItem = doc.querySelectorAll(&#39;.nav-item&#39;);
            }
            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 = &#39;nav-item&#39;
                }
                This.className = &#39;nav-item active&#39;;// 当前_this指向 li
                this.bannerWraper.style.left = - this.bannerW * this.index + &#39;px&#39;;
                // console.log(this.index,&#39;this.index&#39;);
                if(this.options.loop && this.index == this.navigationItem.length){
                    setTimeout(function(){
                        _this.bannerWraper.className = &#39;banner-wraper&#39;;
                        _this.bannerWraper.style.left = 0;
                        setTimeout(function(){
                            _this.bannerWraper.className = &#39;banner-wraper trans&#39;;
                        }, _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 = &#39;nav-item active&#39;;
                        setTimeout(function(){
                            _this.bannerWraper.className = &#39;banner-wraper&#39;;
                            console.log(1)
                            _this.bannerWraper.style.left = 0;
                            setTimeout(function(){
                                console.log(2)
                                _this.bannerWraper.className = &#39;banner-wraper trans&#39;;
                            }, _this.speed/2);
                        }, _this.speed);
                        return;
                    }
                    _this.navigationItem[_this.index].className = &#39;nav-item active&#39;;
                }, 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(&#39;p&#39;);
                    pContainer.appendChild(htmlObj);
                    return pContainer.innerHTML;
                };
                var _bannerHtml = this.bannerWraper.innerHTML;
                this.bannerWraper.innerHTML = _bannerHtml + htmlObjConvertStr(this.bannerItem[0]);
                this.bannerItem = this.banner.querySelectorAll(&#39;.banner-item&#39;);
                this.bannerWraper.style.width = this.bannerW * this.bannerItem.length + &#39;px&#39;;// 修正banenrWraper宽度
                this.bannerItem[this.bannerItem.length - 1].className = &#39;banner-item&#39;;// 修正末尾banner-item类名
            }
            Swiper.fn.constructor = Swiper;// 修正contructor指向
            win.Swiper = Swiper;// 将swiper挂载到window对象
        })(window, document);
        Swiper({
            el: &#39;#swiper&#39;,
            autoPlay: true, // 默认为false不自动播放
            delay: 3000, // 默认为4s
            loop: true
        });
    </script>
</body>
</html>
本篇介绍了原生js组件化开发简单轮播图实例代码，更多相关内容请关注php中文网。
相关推荐：

<a href="//m.sbmmt.com/website-design-ask-402906.html" target="_blank">前端调用微信支付接口</a><a href="//m.sbmmt.com/website-design-ask-402908.html" target="_blank"><br/><br/><br/></a><br/>

The above is the detailed content of Example code for simple carousel chart development using native js components. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：css3 animated navigation bar 3DNext article：css3 animated navigation bar 3D

See more

Example code for simple carousel chart development using native js components

Related articles