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

互联网 18-6-11

<!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组件化开发简单轮播图实例代码，更多相关内容请关注php中文网。 相关推荐：