<!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组件化开发简单轮播图实例代码，更多相关内容请关注。相关推荐：
前端调用微信支付接口
以上就是原生js组件化开发简单轮播图实例代码的详细内容。