原生js + css3 + 定时器 无缝轮播图(部分)
## 起因 ##
现在自学前端中,学到移动端,在做一个项目,课程开始用原生的方法写轮播图(无缝),但是视频讲的是面向过程的方式,现在自己用面向对象的方式写一下。
## 上代码 ##
- html的代码
<div class="jd_nav"> <ul class="clearfix"> <li><a href="#"><img src="images/nav0.png" alt=""><p>分类</p></a></li> <li><a href="#"><img src="images/nav1.png" alt=""><p>分类</p></a></li> <li><a href="#"><img src="images/nav2.png" alt=""><p>分类</p></a></li> <li><a href="#"><img src="images/nav3.png" alt=""><p>分类</p></a></li> <li><a href="#"><img src="images/nav4.png" alt=""><p>分类</p></a></li> <li><a href="#"><img src="images/nav5.png" alt=""><p>分类</p></a></li> <li><a href="#"><img src="images/nav6.png" alt=""><p>分类</p></a></li> <li><a href="#"><img src="images/nav7.png" alt=""><p>分类</p></a></li> </ul> </div>
css##代码
.jd_nav{ width: 100%; background-color: #fff; border-bottom:1px solid #ccc; } .jd_nav ul{ padding-top: 10px; width: 100%; padding-bottom: 10px; } .jd_nav ul li{ width: 25%; float: left; } .jd_nav ul li a{ display: block; width: 100%; } .jd_nav ul li a img{ display: block; width: 40px; height: 40px; margin:0 auto; } .jd_nav ul li a p{ text-align: center; font-size: 12px; padding:5px 0; }
js代码
window.onload = function () { let bn = new Banner(); bn.init(); } let Banner= function () { /*自定义索引*/ this.index = 1; /*获取轮播图的大容器*/ this.banner = document.querySelector('.jd_banner'); /*获取容器的宽度*/ this.width = this.banner.offsetWidth; /*获取相框容器*/ this.imageBox = this.banner.querySelector('ul:first-child'); } /*在原型上添加一个初始化的方法*/ Banner.prototype.init = function () { this.times(); }; /*在原型上添加一个添加 transition 方法*/ Banner.prototype.addTransition= function () { this.imageBox.style.transition = 'transform 0.2s'; this.imageBox.style.webkitTransition = 'all 0.2s'; }; /*在原型上添加一个 移除transition 方法*/ Banner.prototype.removeTransition = function () { console.log('remove'); this.imageBox.style.transition = 'none'; this.imageBox.style.webkitTransition = 'none'; }; /*在原型上添加一个设置 translate 方法*/ Banner.prototype.setTranslate = function (translatex) { console.log('set'); this.imageBox.style.transform = 'translateX('+translatex+'px)'; this.imageBox.style.webkitTransform = 'translateX('+translatex+'px)'; }; /*在原型上添加一个times 方法,里面主要是包含自动播放和判断最后一张图片和第一张图片*/ Banner.prototype.times= function(){ var _this = this; setInterval(function () { _this.index++; _this.addTransition(); _this.setTranslate(-_this.index*_this.width); } , 1000); /*需要等最后一张结束去判断 是否瞬间定位到第一张*/ _this.imageBox.addEventListener('transitionend' , function (){ if(_this.index >= 9){ // console.log(index); /*瞬间过渡*/ _this.index = 1; /*清过渡*/ _this.removeTransition(); /*做位移*/ _this.setTranslate(-_this.index*_this.width) }else if (_this.index <= 0) { /*滑动的时候也要无缝*/ /*瞬间过渡*/ _this.index = 8; /*清过渡*/ _this.removeTransition(); /*做位移*/ _this.setTranslate(-_this.index*_this.width); } }) };
感受
- 学了javascript差不过过了半年了,但是对于一些知识点还是有点忘记了,比如面向对象方面的知识点,但是比起没有学过javascript,好了很多了,可以查一下资料就可以明白。
- 对于把面向过程改成面向对象,我一边查资料,一边改,但是还是把定时器方面的this指向忘记了,通过查找网上的轮播图面向对象的文章,明白了定时器this指向的问题了,至于为什么times 方法中 imageBox.addEventListener 这里,我用面向过程的方式来调试的时候,this指向是ul,当时用面向对象的方式,this的指向就是定义的Banner。
- 感觉学了很多知识,但是现在还没有出来从事这一行,希望能在尽早踏出这一步。
- 以后没学到一些知识都记录一下,提高自己的写作水平。
- 如有什么问题,望各位指出。
</div>