编程 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 相关文章推荐

Extjs在exlipse中设置自动提示的方法

Apr 07 Javascript

基于jQuery的获取标签名的代码

Jul 16 Javascript

JavaScript mapreduce工作原理简析

Nov 25 Javascript

使用jQuery validate 验证注册表单实例演示

Mar 25 Javascript

解决jQuery上传插件Uploadify出现Http Error 302错误的方法

Dec 18 Javascript

jQuery实现查找链接文字替换属性的方法

Jun 27 Javascript

探讨跨域请求资源的几种方式（总结）

Dec 02 Javascript

Angular中ng-repeat与ul li的多层嵌套重复问题

Jul 24 Javascript

使用javascript函数编写简单银行取钱存钱流程

May 26 Javascript

微信小程序地图导航功能实现完整源代码附效果图（推荐）

Apr 28 Javascript

node.js中stream流中可读流和可写流的实现与使用方法实例分析

Feb 13 Javascript

three.js利用射线Raycaster进行碰撞检测

Mar 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