共计 2840 个字符，预计需要花费 8 分钟才能阅读完成。
## 起因 ##
现在自学前端中，学到移动端，在做一个项目，课程开始用原生的方法写轮播图（无缝），但是视频讲的是面向过程的方式，现在自己用面向对象的方式写一下。
## 上代码 ##
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>
