面向对象实现无缝轮播
Posted xieyfwin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了面向对象实现无缝轮播相关的知识，希望对你有一定的参考价值。
以下是html代码，图片可以随意更改
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 section{ 10 width:1000px; 11 height:400px; 12 margin:100px auto; 13 position: relative; 14 overflow: hidden; 15 } 16 div{ 17 position: absolute; 18 height:400px; 19 } 20 img{ 21 width:1000px; 22 height:400px; 23 float: left; 24 } 25 span{ 26 position: absolute; 27 width:50px; 28 height:50px; 29 line-height: 46px; 30 font-size: 36px; 31 color:blanchedalmond; 32 background: rgba(0,255,0,.6); 33 top:175px; 34 text-align: center; 35 border-radius:40px; 36 cursor: pointer; 37 } 38 span:nth-of-type(1){ 39 left:10px; 40 } 41 span:nth-of-type(2){ 42 right:10px; 43 } 44 article{ 45 position: absolute; 46 z-index: 1; 47 width:1000px; 48 bottom:20px; 49 display: flex; 50 justify-content: center; 51 } 52 p{ 53 height:20px; 54 width:20px; 55 border-radius:10px; 56 background: rgba(0,0,255,.6); 57 margin:0 10px; 58 cursor: pointer; 59 } 60 .active{ 61 background: red; 62 } 63 </style> 64 </head> 65 <body> 66 <section> 67 <div> 68 <img src="images/1.jpg" alt=""> 69 <img src="images/2.jpg" alt=""> 70 <img src="images/3.jpg" alt=""> 71 <img src="images/4.jpg" alt=""> 72 <img src="images/5.jpg" alt=""> 73 </div> 74 <span><</span> 75 <span>></span> 76 <article></article> 77 </section> 78 </body> 79 </html> 80 <script src = "move.js"></script> 81 <script src = "num2.js"></script>
move.js为一个封装的缓冲运动的小插件，代码详见：https://www.cnblogs.com/XieYFwin/p/10853160.html
以下为num2.js代码（面向对象思想）：
1 function lunbo(){ 2 this.sec = document.querySelector("section"); 3 this.spans = this.sec.querySelectorAll("span"); 4 this.div = this.sec.querySelector("div"); 5 this.article = this.sec.querySelector("article"); 6 this.imgs = this.div.querySelectorAll("img"); 7 this.count = 0; //添加一个计数器 8 this.timer = null; //添加一个计时器 9 this.create(); 10 this.ps = this.article.querySelectorAll("p"); 11 this.init(); 12 } 13 lunbo.prototype = { 14 init : function(){ //整合功能 15 //复制第一张图片，加入div 16 var img1 = this.imgs[0].cloneNode(); 17 this.div.appendChild(img1); 18 //给div动态添加宽度 19 this.div.style.width = ( this.imgs.length + 1 ) * this.imgs[0].offsetWidth + "px"; 20 //动态添加小圆点 21 22 //调用所有的事件 23 this.bindEvent(); 24 }, 25 create : function(){ //动态添加小圆点 26 for(var i = 0, j = this.imgs.length ;i < j; i++){ 27 var p = document.createElement("p"); 28 if(i == 0){ 29 p.className = "active"; 30 } 31 this.article.appendChild(p); 32 } 33 }, 34 clearActive : function(){ //清除小圆点类名 35 for(var i = 0, j = this.ps.length;i < j; i++){ 36 this.ps[i].className = ""; 37 } 38 }, 39 addActive : function(num){ //小圆点划过增加类名 40 this.ps[num].className = "active"; 41 }, 42 nextImg : function(){ 43 move(this.div,{‘left‘: - this.count * this.imgs[0].offsetWidth }) 44 }, 45 preImg: function(){ 46 move(this.div,{‘left‘: - this.count * this.imgs[0].offsetWidth }) 47 }, 48 bindEvent : function(){ //添加所有的事件 49 var _this = this; 50 this.spans[1].onclick = function(){ //第二个span绑定单击事件 51 if(_this.count == _this.imgs.length ){ 52 _this.div.style.left = 0; 53 } 54 _this.count = _this.count > _this.imgs.length - 1 ? 1 : ++_this.count; 55 56 _this.nextImg(); 57 _this.clearActive(); 58 _this.addActive(_this.count % (_this.imgs.length )); 59 } 60 this.spans[0].onclick = function(){ //第一个span绑定单击事件 61 if(_this.count == 0 ){ 62 _this.div.style.left = - (_this.imgs.length ) * _this.imgs[0].offsetWidth + ‘px‘; 63 } 64 _this.count = _this.count <= 0 ? _this.imgs.length - 1 : --_this.count ; 65 _this.preImg(); 66 _this.clearActive(); 67 _this.addActive(_this.count % (_this.imgs.length )); 68 }; 69 for(let k = 0, m = this.ps.length;k < m; k++){ 70 this.ps[k].onmouseover = function(){ 71 _this.clearActive(); 72 _this.addActive(k); 73 _this.count = k; 74 _this.nextImg(); 75 } 76 } 77 this.timer = setInterval(function(){ //定时器轮播 78 if(_this.count == _this.imgs.length ){ 79 _this.div.style.left = 0; 80 } 81 _this.count = _this.count > _this.imgs.length - 1 ? 1 : ++_this.count; 82 83 _this.nextImg(); 84 _this.clearActive(); 85 _this.addActive(_this.count % (_this.imgs.length )); 86 },1000) 87 this.sec.onmouseover = function(){ 88 clearInterval(_this.timer); 89 }; 90 this.sec.onmouseout = function(){ 91 clearInterval(_this.timer); 92 _this.timer = setInterval(function(){ //定时器轮播 93 if(_this.count == _this.imgs.length ){ 94 _this.div.style.left = 0; 95 } 96 _this.count = _this.count > _this.imgs.length - 1 ? 1 : ++_this.count; 97 98 _this.nextImg(); 99 _this.clearActive(); 100 _this.addActive(_this.count % (_this.imgs.length )); 101 },2000) 102 }; 103 }, 104 } 105 new lunbo();
以上是关于面向对象实现无缝轮播的主要内容，如果未能解决你的问题，请参考以下文章
jQuery插件版无缝轮播，重写了之前的代码，显得更高大上一点
轮播图采用jsjquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器