<!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中文网。 相关推荐:
前端调用微信支付接口
以上就是原生js组件化开发简单轮播图实例代码的详细内容,更多请关注php中文网其它相关文章!
已抢65546个
抢已抢30146个
抢已抢16474个
抢已抢8431个
抢已抢10888个
抢已抢22206个
抢