大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

原生js如何实现无缝轮播图效果

这篇文章主要介绍了原生js如何实现无缝轮播图效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

在盱眙等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供网站建设、做网站 网站设计制作按需制作,公司网站建设,企业网站建设,成都品牌网站建设,营销型网站建设,成都外贸网站制作,盱眙网站建设费用合理。

请看代码




 
 无缝轮播图-原生js封装
 
 
 
 
 
 /*公共*/
 html{
 height:100%;
 }
 body, div, dl, dt, dd, ul, ol, li, h2, h3, h4, h5, h6, h7, 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 h3{
 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;
 }
 
 
 /*封装代码*/
 (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('
');  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(":~]/) ? (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;  })()  /*封装代码*/      项目地址  返回首页  
       slide-1  slide-2  slide-3  slide-4  slide-5    
   new bannerha("#banner1");      

 不传参数,执行默认参数,自动轮播  

 

new bannerha("#banner1");

       slide-1  slide-2  slide-3  slide-4  slide-5        new bannerha("#banner2",{  circle: true,  speeds: 50,  pnBtn: true,  autoPlay: true,  times: 1500  });      

 调整自动轮播速度和缓冲速度  

 

new bannerha("#banner2",{  circle: true,  speeds: 50,  pnBtn: true,  autoPlay: true,  times: 1500  });

       slide-1  slide-2  slide-3  slide-4  slide-5        new bannerha("#banner3",{  autoPlay: false  });      

 关闭自动轮播  

 

new bannerha("#banner3",{  autoPlay: false  });

       slide-1  slide-2  slide-3  slide-4  slide-5        new bannerha("#banner4",{  pnBtn: false  });      

 关闭左右切换按钮  

 

new bannerha("#banner4",{  pnBtn: false  });

       slide-1  slide-2  slide-3  slide-4  slide-5        new bannerha("#banner5",{  circle: false  });      

 关闭底部小按钮  

 

new bannerha("#banner5",{  circle: false  });

       

调用方法:

 

new bannerha(selector,{options});

   

options参数

       参数  默认值                                                              
说明
circletrue是否生成底部圆圈按钮
speeds20设置缓冲运动速度
pnBtntrue是否生成左右切换按钮
autoPlaytrue是否自动轮播
times3000设置自动轮播间隔时间
   

感谢你能够认真阅读完这篇文章,希望小编分享的“原生js如何实现无缝轮播图效果”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


网站栏目:原生js如何实现无缝轮播图效果
文章起源:http://dzwzjz.com/article/jhigog.html