原生js实现无缝轮播图效果
程序员文章站
2022-06-20 19:39:53
话不多说,请看代码
话不多说,请看代码
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>无缝轮播图-原生js封装</title> <link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/> <link rel="icon" href="../public/image/favicon.png" type="images/png"/> <link rel="stylesheet" type="text/css" href="../public/style/cssreset-min.css"> <link rel="stylesheet" type="text/css" href="../public/style/common.css"> <style type="text/css"> /*公共*/ html{ height:100%; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0 } body{ position: relative; min-height:100%; font-size:14px; font-family: tahoma, verdana,"microsoft yahei"; color:#333; } a{ text-decoration: none; color:#333; } .header{ width: 960px; padding-top: 15px; margin: 0 auto; line-height: 30px; text-align: right; } .header a{ margin: 0 5px; } .main{ width:960px; margin: 50px auto 0; } .code{ border:1px dashed #e2e2e2; padding:10px 5px; margin-bottom:25px; } pre { font-family: "microsoft yahei",arial,helvetica; white-space: pre-wrap; /*css-3*/ white-space: -moz-pre-wrap; /*mozilla,since1999*/ white-space: -pre-wrap; /*opera4-6*/ white-space: -o-pre-wrap; /*opera7*/ word-wrap: break-word; /*internetexplorer5.5+*/ } .example{ padding-top:40px; margin-bottom:90px; } .example .call{ padding:18px 5px; background:#f0f5f8; } .example h2{ padding-top:20px; margin-bottom:7px; } .example table { width:100%; table-layout:fixed; border-collapse: collapse; border-spacing: 0; border: 1px solid #cee1ee; border-left: 0; } .example thead { border-bottom: 1px solid #cee1ee; background-color: #e3eef8; } .example tr { line-height: 24px; font-size: 13px; } .example tr:nth-child(2n) { background-color: #f0f5f8; } .example tr th,.example tr td { border-left: 1px solid #cee1ee; word-break: break-all; word-wrap: break-word; padding:0 10px; font-weight: normal; } .example tr th { color: #555; padding-top: 2px; padding-bottom: 2px; text-align: left; } /*公共*/ .bannerha-container{ width: 800px; height: 300px; margin: 20px auto; overflow: hidden; position: relative; } .bannerha-wrapper{ width: 100%; height: 100%; position: absolute; display: -webkit-box; display: box; } .bannerha-slide{ background: #ccc; list-style: none; width: 100%; height: 100%; text-align: center; font-size: 18px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .bannerha-pagination{ position: absolute; text-align: center; z-index: 10; bottom: 10px; left: 0; width: 100%; } .bannerha-pagination-bullet{ width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #fff; opacity: .5; margin: 0 4px; } .bannerha-pagination-bullet-active{ opacity: 1; background: #ff0; } .bannerha-button{ width: 100px; height: 100%; position: absolute; top: 0; background-color: #333; z-index: 1; cursor: pointer; filter: alpha(opacity:20); opacity: 0.2; -webkit-transition: all .2s ease-in; -moz-transition: all .2s ease-in; -ms-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-in; } .bannerha-button.active{ filter: alpha(opacity:60); opacity: 0.6; } .bannerha-button-prev{ left:0; } .bannerha-button-next{ right:0; } </style> <script type="text/javascript"> /*封装代码*/ (function() { var bannerha = function(e, opts) { var self = this; var defaults = { circle: true, speeds: 20, pnbtn: true, autoplay: true, times: 3000 } opts = opts || {}; for (var w in defaults) { if ("undefined" == typeof opts[w]) { opts[w] = defaults[w]; } } this.params = opts; this.container = r(e); if (this.container.length > 1) { var x = []; return this.container.each(function() { x.push(new bannerha(this, opts)) }), x } this.containers = this.container[0]; this.oul = this.container.find(".bannerha-wrapper")[0]; this.liw = this.oul.children[0].offsetwidth; this.len = this.oul.children.length; this.flag = true; this.num = 1; this.timer = null; this.timers = null; this.init(); } bannerha.prototype = { init: function() { var self = this; this.clone(); if (this.params.pnbtn) { this.pnbtn(); } if (this.params.circle) { this.circle(); } if (this.params.autoplay) { this.plays(); this.boxmove() } }, boxmove: function() { var self = this; this.container[0].addeventlistener('mouseout', function(e) { self.plays(); }, false); this.container[0].addeventlistener('mouseover', function(e) { self.stops(); }, false); }, plays: function() { var self = this; this.timers = setinterval(function() { self.go(-self.liw); }, self.params.times); }, stops: function() { clearinterval(this.timers) }, clone: function() { var fir = this.oul.children[0].clonenode(true), last = this.oul.children[this.len - 1].clonenode(true); this.oul.appendchild(fir); this.oul.insertbefore(last, this.oul.children[0]); this.len = this.oul.children.length; this.oul.style.left = -this.liw + 'px'; }, pnbtn: function() { var self = this; this.container.append('<div class="bannerha-button bannerha-button-prev"></div><div class="bannerha-button bannerha-button-next"></div>'); this.container[0].addeventlistener('click', function(e) { self.events(e) }, false); this.container[0].addeventlistener('mouseover', function(e) { self.eventsover(e) }, false); }, circle: function() { var self = this; var pagination = document.createelement("div"); pagination.classname = "bannerha-pagination"; for (var i = 0; i < self.len - 2; i++) { var btnspan = document.createelement("span"); btnspan.classname = "bannerha-pagination-bullet"; pagination.appendchild(btnspan); } this.containers.appendchild(pagination); this.bullet = this.container.find(".bannerha-pagination-bullet"); this.bullet[0].classlist.add("bannerha-pagination-bullet-active"); for (var i = 0; i < this.bullet.length; i++) { ! function(i) { self.bullet[i].addeventlistener('click', function(e) { if (!self.flag) { return; } if (this.classname.indexof('bannerha-pagination-bullet-active') > -1) { return; } var myindex = i - (self.num - 1); var offset = -self.liw * myindex; self.go(offset); self.num = i + 1; self.showbutton(); }, false); }(i); } }, events: function(e) { var self = this; var osrc = e.srcelement || e.target; if (osrc.tagname.tolowercase() == 'div' && osrc.classname.indexof('bannerha-button-prev') > -1) { if (!this.flag) { return; } self.go(this.liw); if (self.params.circle) { self.showbutton(); } } if (osrc.tagname.tolowercase() == 'div' && osrc.classname.indexof('bannerha-button-next') > -1) { if (!this.flag) { return; } self.go(-this.liw); if (self.params.circle) { self.showbutton(); } } }, eventsover: function(e) { var self = this; var osrc = e.srcelement || e.target; if (osrc.classname.indexof('bannerha-button') > -1) { osrc.classlist.add("active") osrc.addeventlistener('mouseout', function(e) { osrc.classlist.remove("active"); }, false); } }, showbutton: function() { var self = this; var num = this.num - 1; for (var i = 0; i < this.bullet.length; i++) { this.bullet[i].classlist.remove("bannerha-pagination-bullet-active"); } this.bullet[num].classlist.add("bannerha-pagination-bullet-active"); }, go: function(offset) { var self = this; if (self.flag) { self.flag = false; if (offset < 0) { self.num++; if (self.num > self.len - 2) { self.num = 1; } } if (offset > 0) { self.num--; if (self.num <= 0) { self.num = self.len - 2 } } var srty = parseint(self.oul.style.left) + offset; if (parseint(self.oul.style.left) < srty || parseint(self.oul.style.left) > srty) { self.timer = setinterval(function() { var mernum = parseint(self.oul.style.left); var speed = (srty - mernum) / 10; speed = speed > 0 ? math.ceil(speed) : math.floor(speed); self.oul.style.left = parseint(self.oul.style.left) + speed + 'px'; if (parseint(self.oul.style.left) == srty) { clearinterval(self.timer); self.oul.style.left = srty + 'px'; if (srty > -self.liw) { self.oul.style.left = -self.liw * (self.len - 2) + 'px'; } if (srty < -self.liw * (self.len - 2)) { self.oul.style.left = -self.liw + 'px'; } self.flag = true; } }, self.params.speeds) } } } } var r = (function() { var e = function(e) { var a = this, t = 0; for (t = 0; t < e.length; t++) { a[t] = e[t]; } return a.length = e.length, this }; e.prototype = { addclass: function(e) { if ("undefined" == typeof e) return this; for (var a = e.split(" "), t = 0; t < a.length; t++) for (var r = 0; r < this.length; r++) this[r].classlist.add(a[t]); return this }, each: function(e) { for (var a = 0; a < this.length; a++) e.call(this[a], a, this[a]); return this }, html: function(e) { if ("undefined" == typeof e) return this[0] ? this[0].innerhtml : void 0; for (var a = 0; a < this.length; a++) this[a].innerhtml = e; return this }, find: function(a) { for (var t = [], r = 0; r < this.length; r++) for (var i = this[r].queryselectorall(a), s = 0; s < i.length; s++) t.push(i[s]); return new e(t) }, append: function(a) { var t, r; for (t = 0; t < this.length; t++) if ("string" == typeof a) { var i = document.createelement("div"); for (i.innerhtml = a; i.firstchild;) this[t].appendchild(i.firstchild) } else if (a instanceof e) for (r = 0; r < a.length; r++) this[t].appendchild(a[r]); else this[t].appendchild(a); return this }, } var a = function(a, t) { var r = [], i = 0; if (a && !t && a instanceof e) { return a; } if (a) { if ("string" == typeof a) { var s, n, o = a.trim(); if (o.indexof("<") >= 0 && o.indexof(">") >= 0) { var l = "div"; for (0 === o.indexof("<li") && (l = "ul"), 0 === o.indexof("<tr") && (l = "tbody"), (0 === o.indexof("<td") || 0 === o.indexof("<th")) && (l = "tr"), 0 === o.indexof("<tbody") && (l = "table"), 0 === o.indexof("<option") && (l = "select"), n = document.createelement(l), n.innerhtml = a, i = 0; i < n.childnodes.length; i++) r.push(n.childnodes[i]) } else for (s = t || "#" !== a[0] || a.match(/[ .<>:~]/) ? (t || document).queryselectorall(a) : [document.getelementbyid(a.split("#")[1])], i = 0; i < s.length; i++) s[i] && r.push(s[i]) } else if (a.nodetype || a === window || a === document) { r.push(a); } else if (a.length > 0 && a[0].nodetype) { for (i = 0; i < a.length; i++) { r.push(a[i]); } } } return new e(r) }; return a; }()) window.bannerha = bannerha; })() /*封装代码*/ </script> </head> <body> <div class="header"> <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a> <a href="/widget/">返回首页</a> </div> <div class="main"> <div class="bannerha-container" id="banner1"> <ul class="bannerha-wrapper" > <li class="bannerha-slide">slide-1</li> <li class="bannerha-slide">slide-2</li> <li class="bannerha-slide">slide-3</li> <li class="bannerha-slide">slide-4</li> <li class="bannerha-slide">slide-5</li> </ul> </div> <script type="text/javascript"> new bannerha("#banner1"); </script> <div class="code"> <p> 不传参数,执行默认参数,自动轮播 </p> <p>new bannerha("#banner1");</p> </div> <div class="bannerha-container" id="banner2"> <ul class="bannerha-wrapper" > <li class="bannerha-slide">slide-1</li> <li class="bannerha-slide">slide-2</li> <li class="bannerha-slide">slide-3</li> <li class="bannerha-slide">slide-4</li> <li class="bannerha-slide">slide-5</li> </ul> </div> <script type="text/javascript"> new bannerha("#banner2",{ circle: true, speeds: 50, pnbtn: true, autoplay: true, times: 1500 }); </script> <div class="code"> <p> 调整自动轮播速度和缓冲速度 </p> <p>new bannerha("#banner2",{ circle: true, speeds: 50, pnbtn: true, autoplay: true, times: 1500 });</p> </div> <div class="bannerha-container" id="banner3"> <ul class="bannerha-wrapper" > <li class="bannerha-slide">slide-1</li> <li class="bannerha-slide">slide-2</li> <li class="bannerha-slide">slide-3</li> <li class="bannerha-slide">slide-4</li> <li class="bannerha-slide">slide-5</li> </ul> </div> <script type="text/javascript"> new bannerha("#banner3",{ autoplay: false }); </script> <div class="code"> <p> 关闭自动轮播 </p> <p>new bannerha("#banner3",{ autoplay: false });</p> </div> <div class="bannerha-container" id="banner4"> <ul class="bannerha-wrapper" > <li class="bannerha-slide">slide-1</li> <li class="bannerha-slide">slide-2</li> <li class="bannerha-slide">slide-3</li> <li class="bannerha-slide">slide-4</li> <li class="bannerha-slide">slide-5</li> </ul> </div> <script type="text/javascript"> new bannerha("#banner4",{ pnbtn: false }); </script> <div class="code"> <p> 关闭左右切换按钮 </p> <p>new bannerha("#banner4",{ pnbtn: false });</p> </div> <div class="bannerha-container" id="banner5"> <ul class="bannerha-wrapper" > <li class="bannerha-slide">slide-1</li> <li class="bannerha-slide">slide-2</li> <li class="bannerha-slide">slide-3</li> <li class="bannerha-slide">slide-4</li> <li class="bannerha-slide">slide-5</li> </ul> </div> <script type="text/javascript"> new bannerha("#banner5",{ circle: false }); </script> <div class="code"> <p> 关闭底部小按钮 </p> <p>new bannerha("#banner5",{ circle: false });</p> </div> <div class="example"> <div class="call"> <h1>调用方法:</h1> <p>new bannerha(selector,{options});</p> </div> <h2>options参数</h2> <table> <thead> <tr> <th width="150">参数</th> <th width="100">默认值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>circle</td> <td>true</td> <td>是否生成底部圆圈按钮</td> </tr> <tr> <td>speeds</td> <td>20</td> <td>设置缓冲运动速度</td> </tr> <tr> <td>pnbtn</td> <td>true</td> <td>是否生成左右切换按钮</td> </tr> <tr> <td>autoplay</td> <td>true</td> <td>是否自动轮播</td> </tr> <tr> <td>times</td> <td>3000</td> <td>设置自动轮播间隔时间</td> </tr> </tbody> </table> </div> </div> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!