编程 Javascript

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

Posted in Javascript onJanuary 11, 2017

话不多说，请看代码

<!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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

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

- Author -

继小鹏

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery实现marquee效果(文字或者图片的水平垂直滚动)

Jan 07 Javascript

jquery struts 验证唯一标识(公用方法)

Mar 27 Javascript

解析window.open的使用方法总结

Jun 19 Javascript

小心！AngularJS结合RequireJS做文件合并压缩的那些坑

Jan 09 Javascript

jquery的ajax提交form表单的两种方法小结(推荐)

May 25 Javascript

JavaScript和JQuery获取DIV值的方法示例

Mar 07 Javascript

bootstrap3 dialog 更强大、更灵活的模态框

Apr 20 Javascript

微信小程序网络请求wx.request详解及实例

May 18 Javascript

详解使用nvm管理多版本node的方法

Aug 30 Javascript

解决vue-router进行build无法正常显示路由页面的问题

Mar 06 Javascript

javascript原生封装一个淡入淡出效果的函数测试实例代码

Mar 19 Javascript

js实现mp3录音通过websocket实时传送+简易波形图效果

Jun 12 Javascript

Bootstrap 填充Json数据的实例代码

Jan 11 #Javascript

原生js实现放大镜效果

Jan 11 #Javascript

微信小程序高德地图SDK详解及简单实例（源码下载）

Jan 11 #Javascript

微信小程序开发经验总结（推荐）

Jan 11 #Javascript

bootstrap手风琴制作方法详解

Jan 11 #Javascript

el表达式写入bootstrap表格数据页面的实例代码

Jan 11 #Javascript

微信小程序本地存储及登录页面处理实例详解

Jan 11 #Javascript