Développement natif basé sur des composants js d'un exemple de code de graphique carrousel simple-Questions et réponses frontales-php.cn

Développement natif basé sur des composants js d'un exemple de code de graphique carrousel simple

jacklove

Libérer： 2018-06-11 22:58:58

original

2742 Les gens l'ont consulté

<!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中文网。
相关推荐：

Copier après la connexion

<a href="http://www.php.cn/website-design-ask-402906.html" target="_blank">前端调用微信支付接口</a><a href="http://www.php.cn/website-design-ask-402908.html" target="_blank"><br/><br/><br/></a><br/>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!