面向对象class加原生js实现无限轮播图

html加css加js全部带码

这是js代码,下面还有一个封装的运动函数
class Swiper{
            constructor(){
                this.$imageBox = this.getDom('.imageBox');
                this.$tipsBox = this.getDom('.tipsBox');
                this.$box = this.getDom('.box');
                this.$liAll = this.getDomA('li');
                this.$imageWidth = this.$box.clientWidth;
                this.$pAll = this.getDomA('p');
                this.left_btn = this.getDom('.left_btn');
                this.right_btn = this.getDom('.right_btn');
                this.$first = this.$liAll[0];
                this.$last = this.$liAll[this.$liAll.length - 1];
                this.showIndex = 0;
                this.timer = null;
            }
            // 入口函数,相当于一个大总闸,控制所有的函数执行
            init(){
                this.addImg();
                this.getIndex();
                this.event();
                this.showImg(this.showIndex);
                this.autoPlay();
            }
            // 获取dom元素
            getDom(ele){
                return document.querySelector(ele);
            }
            getDomA(ele){
                return document.querySelectorAll(ele);
            }
            addImg(){
                // 克隆第一张图片并加到$imageBox里最后,伪造最后一张图片
                this.$imageBox.appendChild(this.$first.cloneNode(true));
                // 克隆最后一张图片并加到$imageBox里最前面,伪造第一张图片
                this.$imageBox.insertBefore(this.$last.cloneNode(true), this.$first);
                // 默认left,初始状态下显示真正的第一张图片
                this.$imageBox.style.left = -this.$imageWidth + 'px';
            }
            event(){
                var _this = this;
                // 鼠标移入小圆点,利用事件委托,获取当前圆点的index
                // 执行showImg()函数
                // 重新执行自动播放autoPlay()函数
                this.$tipsBox.onmouseover = function(e){
                    var e = e || event;
                    var target = e.target || e.srcElement;
                    if(target.nodeName == 'P'){
                        var index = target.index;
                        _this.showImg(index);
                        _this.autoPlay();
                    }
                }
                // 点击下一张按钮
                // 执行showImg()函数,showIndex加1
                // 重新执行自动播放autoPlay()函数
                this.right_btn.onclick = function(){
                    _this.showImg(_this.showIndex + 1)
                    _this.autoPlay();
                }
                // 点击上一张按钮
                //执行showImg()函数,showIndex减1
                // 重新执行自动播放autoPlay()函数
                this.left_btn.onclick = function(){
                    _this.showImg(_this.showIndex - 1)
                    _this.autoPlay();
                }
            }

            // 循环$pAll集合,给每一个$pAll加一个index属性,属性值分别为0,1,2,3,4,5
            getIndex(){
                for(var i = 0; i < this.$pAll.length; i++){
                    this.$pAll[i].index = i;
                }
            }
            showImg(index){
                // 最小值判断当index小于0时,图片位置立马跳到最后一张
                if(index < 0){
                    index = this.$pAll.length - 1
                    this.$imageBox.style.left = -this.$imageWidth * (this.$liAll.length + 1) + 'px';
                }
                // 最大值判断当index大于最大值时,图片跳到第一张,let为0
                if(index > this.$pAll.length - 1){
                    index = 0
                    this.$imageBox.style.left = 0;
                }
                

                // 没有过渡直接跳到下一张图片
                // this.$imageBox.style.left = -this.$imageWidth * (index + 1) + 'px';

                // move()调用了一个封装运动函数,实现图片之间的平滑过渡,代码在下方
                move(this.$imageBox, 'left', -this.$imageWidth * (index + 1))

                // 把index值赋给showIndex,方便给autoPlay()使用
                this.showIndex = index;
                // 循环$pAll,先将全部的小圆点的class名删除
                this.$pAll.forEach(x => {
                    x.classList.remove('active');
                });
                // 将展示图片对应的小圆点class名加上
                this.$pAll[index].classList.add('active');
            }
            autoPlay(){
                clearInterval(this.timer);
                this.timer = setInterval( _ => {
                    this.showImg(this.showIndex + 1)
                },1500)
            }
        }
        // 实例化出来的对象
        var swiper = new Swiper();
        // 执行入口函数init()
        swiper.init();

封装的move()函数

function move(ele, attr, target, options) {
    // 把options里面传入的参数, 替换__default
    const __default = {
        time: 400,
        callback: null,
        ...options
    }
    let $box = ele;
    if(typeof ele == 'string') {
        $box = $(ele);
    }
    clearInterval($box.timer);
    let init = parseFloat(getStyle($box, attr));
    if(attr == 'opacity') {
        init *= 100;
    }
    // (目标值 - 初始值) / 次 = (时间 / 频率)
    let speed = (target - init) / (__default.time / 10);
    $box.timer = setInterval(function () {
        init += speed;
        if ((speed <= 0 && init <= target) || (speed >= 0 && init >= target)) {
            // 终止运动条件
            init = target;
            clearInterval($box.timer);
            if (typeof __default.callback == 'function')
                __default.callback($box);
        }
        if(attr == 'opacity') {
            $box.style[attr] = init / 100
        } else {
            $box.style[attr] = init + 'px';
        }
    }, 10)
}

function getStyle(ele,attr){
	if(window.getComputedStyle){
		return window.getComputedStyle(ele,null)[attr];
	}else{
		return ele.currentStyle[attr];
	}
}

　　html代码

<div class="box">
        <ul class="imageBox">
            <li><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
            <li><img src="images/4.jpg" alt=""></li>
            <li><img src="images/5.jpg" alt=""></li>
            <li><img src="images/6.jpg" alt=""></li>
        </ul>
        <ol class="tipsBox">
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </ol>
        <a href="#" class="left_btn"></a>
        <a href="#" class="right_btn"></a>
    </div>

　　css代码

*{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 590px;
            height: 470px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        ul{
            width: 9999px;
            height: 470px;
            position: absolute;
        }
        li{
            list-style: none;
            float: left;
        }
        img{
            display: block;
        }
        ol{
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        p{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: black;
            opacity: 0.3;
            float: left;
            margin-left: 5px;
            cursor: pointer;
        }
        .active{
            background: black;
            opacity: 0.9;
        }
        .left_btn{
            width: 60px;
            height: 30px;
            background: black;
            opacity: 0.5;
            margin-top: 220px;
            position: absolute;
        }
        .right_btn{
            width: 60px;
            height: 30px;
            background: black;
            opacity: 0.5;
            margin-top: 220px;
            position: absolute;
            right: 0;
        }

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄

×

选择打赏方式：

微信 QQ钱包 支付宝

打赏

打赏

打赏

多少都是心意！谢谢大家！！！