欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

原生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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!