面向对象编程js原生实现轮播图效果

这篇文章主要介绍了如何使用js原生利用面向对象的方式实现轮播图效果。

1.先看效果图

2.需要实现的功能：

• 自动轮播
• 点击左右箭头按钮无缝轮播
• 点击数字按钮切换图片

分析：如何实现无缝轮播？
在一个固定大小的相框里有一个ul标签，其长度是几个图片宽度的总和，通过translateX()的方法来实现左右移动动画。
如何实现无缝呢？比如有三张图片，可以在把第一张图片通过cloneNode的方法克隆下来放到第三张图片后面。图片顺序 1,2,3,1，看下面的HTML结构，结构中并没有4张图，第四张图是生成的。

3.html结构

<!-- ul是图片盒子，ol是数字按钮盒子，最下面的div是左右箭头按钮盒子 -->
<div class="container">
    <div id="screen">
        <ul>
            <li><img src="./img/1.jpg" alt=""></li>
            <li><img src="./img/2.jpg" alt=""></li>
            <li><img src="./img/3.jpg" alt=""></li>
        </ul>
        <ol>
            <!--<li class="active">1</li>-->
            <!--<li>2</li>-->
            <!--<li>3</li>-->
        </ol>
    </div>
    <div>
        <span>&lt;</span>
        <span>&gt;</span>
    </div>
</div>

4.功能实现

4.1 创建对象

创建一个对象，需要传入一个相框盒子元素，通过这个元素来获取盒子中其他需要的元素，并把这些作为这个Carousel对象的属性：

function Carousel(el) {
    this.screen = el; // 相框
    this.width = this.screen.offsetWidth; // 相框宽度
    this.ulBox = this.screen.children[0]; // ul盒子
    this.list = this.ulBox.children; // ul下面所有li
    this.olBox = this.screen.children[1]; // 数字按钮盒子
    this.arrow = this.screen.nextElementSibling; // 箭头盒子
    this.leftArraw = this.arrow.children[0]; // 左箭头
    this.rightArraw = this.arrow.children[1]; // 右箭头
    this.index = 0; // 数字按钮的索引
    this.timeId = null; // 定时器的id
    this.activeClass = 'active'; // 数字按钮class名
    this.durtion = '.35s'; // 动画持续时间
}

4.2动画效果由translateX实现

// 动画
Carousel.prototype.animate = function (target) {
    this.ulBox.style.transform = 'translateX(' + target + 'px)'
};

4.3根据轮播图片个数生成数字按钮节点

生成节点后，为新生成的节点添加点击事件，实现每次点击根据节点对应的index切换图片，这里实现的需求的第三个功能。

// 创建节点
Carousel.prototype.createNodes = function () {
	let self = this;
	// 创建按钮节点
	for (let i = 0; i < self.list.length; i++) {
	    let liObj = document.createElement('li');
	    liObj.innerText = i + 1;
	    self.olBox.appendChild(liObj);
	
	    // 为生成的数字按钮添加点击事件
	    liObj.onclick = function () {
	        self.index = this.innerText - 1; // 获取当前点击对象的索引值
	        self.switch_sel();
	        self.animate(-self.index * self.width);
	    };
	}
    // 默认显示第一张图片，第一个数字按钮默认选中状态
    self.olBox.children[0].className = self.activeClass;
    // 克隆第一张图放到ulBox后面，实现无缝轮播
    self.ulBox.appendChild(self.ulBox.children[0].cloneNode(true));
};

4.4轮播图数字按钮点击切换状态

因为多个地方用到这段代码，所有就写成一个方法挂在Carousel对象上了

// 切换数字按钮的选中状态
Carousel.prototype.switch_sel = function(){
    let self = this;
    for (let i = 0; i < self.olBox.children.length; i++) {
        self.olBox.children[i].removeAttribute('class');
    }
    self.olBox.children[self.index].className = self.activeClass;
};

4.5轮播事件，也是点击右箭头的事件

// 轮播事件
Carousel.prototype.clickHandle = function () {
    let self = this;
    // 如果是最后一张图，直接跳到第一张
    if (self.index === self.list.length - 1) {
        self.index = 0;

        // 当点击到最后一张时直接跳到第一张
        self.ulBox.style.transitionDuration = '0s';
        self.animate(-self.index * self.width);
    }

    // 必须有时间延迟，否则图片跳转切换不成功，因为self.animate()没有来得及执行就被后面的self.animate()函数覆盖了。
    setTimeout(function () {
        self.ulBox.style.transitionDuration = self.durtion;
        self.index++;
        self.animate(-self.index * self.width);

        // 如果是最后一张图，则去掉最后一个的class属性，切换到第一个
        if (self.index === self.list.length - 1) {
            self.olBox.children[self.olBox.children.length - 1].removeAttribute('class');
            self.olBox.children[0].className = self.activeClass;
        } else { // 切换当前选中状态
            self.switch_sel();
        }
    }, 20);
};

4.6事件绑定

为左右箭头点击绑定事件，同时当鼠标hover在相框上时自动轮播取消，鼠标离开相框时自动轮播开始执行。

// 事件绑定
Carousel.prototype.bindEvent = function () {
    let self = this;
    // 又点击下一张
    self.rightArraw.onclick = function () {
        self.clickHandle();
    };
    // 左点击上一张
    self.leftArraw.onclick = function(){
        if(self.index === 0){
            self.index = self.list.length - 1;

            // 直接跳到最后一张
            self.ulBox.style.transitionDuration = '0s';
            self.animate(-self.index * self.width);
        }

        setTimeout(function(){
            self.ulBox.style.transitionDuration = self.durtion;
            self.index--;
            self.animate(-self.index * self.width);
            self.switch_sel();
        }, 20);
    };

    // 鼠标悬停清除定时器
    self.screen.parentElement.onmouseover = function(){
        self.timeId && clearInterval(self.timeId);
        self.arrow.style.display = 'flex';

    };
    // 鼠标离开打开定时器
    self.screen.parentElement.onmouseout = function(){
        self.timeId = setInterval(self.clickHandle.bind(self), 2000);
        self.arrow.style.display = 'none';
    }
};

4.7初始化方法

初始化方法中创建节点，绑定事件，同时设定定时器实现自动轮播效果。

// 初始化
Carousel.prototype.init = function () {
    this.createNodes();
    this.bindEvent();
    this.timeId = setInterval(this.clickHandle.bind(this), 2000);
    // 注意这里要bind(this) 否则clickHandle中的this指向window
};

4.8实例化Carousel对象，大功告成

实例化一个轮播图对象，然后调该对象的init方法。
只要html结构相同，只需要传入不同的相框元素，就可以在同一个页面中实例化多个轮播图对象。也就是说，同一个页面的多处轮播效果。

let carousel = new Carousel(document.getElementById('screen'));
carousel.init();

5备注

全部的代码和css样式可参考我的 github中的轮播图仓库，菜鸟程序猿一枚，程序设计如果有不妥的地方欢迎提出意见或建议，当然啦，如果你喜欢并star了我的这个仓库，我会很开心的 : ）