摘要：原生寫的輪播兼容移動(dòng)端插件，支持輪播速度，輪播內(nèi)容，輪播間隔，手勢靈敏度自定義，導(dǎo)航圓點(diǎn)點(diǎn)擊跳轉(zhuǎn)手勢滑動(dòng)。使用說明文件包含小部分語法編寫的文件，在移動(dòng)端有兼容性問題，僅供于源碼參考。移動(dòng)端跟端開發(fā)引用文件直接下載進(jìn)行引入使用。

原生js寫的輪播兼容 pc+移動(dòng)端 插件，支持輪播速度，輪播內(nèi)容，輪播間隔，手勢靈敏度自定義，導(dǎo)航圓點(diǎn)點(diǎn)擊跳轉(zhuǎn),手勢滑動(dòng)。

使用說明：slide.js文件包含小部分es6語法編寫的文件，在移動(dòng)端有兼容性問題，僅供于源碼參考。移動(dòng)端跟pc端開發(fā)引用js文件直接下載slide-es5.js進(jìn)行引入使用。

html代碼

必須需要設(shè)置：包裹元素的id，以及高度跟寬度

包裹元素下面需要跟隨一個(gè)div，div下面是帶有class屬性為slide-item的任意元素

js代碼：

//需要先引入插件

//第一個(gè)參數(shù)是設(shè)置了輪播的包裹元素的id，是必須參數(shù)
//第二個(gè)參數(shù)是輪播間隔，非必須參數(shù)，默認(rèn)為3000ms
//第三個(gè)參數(shù)是輪播速度, 非必須參數(shù)，默認(rèn)為1，數(shù)值越大輪播速度越快
//第四個(gè)參數(shù)是手指滑動(dòng)靈敏度，非必須參數(shù)，默認(rèn)為20，數(shù)值越大需要滑動(dòng)觸發(fā)的距離就越大

這是上面代碼的slide Demo

廢話不多說，下面實(shí)現(xiàn)代碼跟注釋說明

(function () {
let Slide = function (
    slideId = "slide",
    timeOut = 3000,
    speed = 0.1,
    d = 20
) {
    this.d = d;//滑動(dòng)靈敏度
    this.timeOut = timeOut;//輪播間隔
    this.slide = document.querySelector("#slide"); //獲取視窗層
    this.room = this.slide.querySelector("div"); //獲取內(nèi)容層
    this.imgs = [...this.slide.querySelectorAll(".slide-item")]; //輪播圖元素組
    this.slideWidth = parseInt(getComputedStyle(this.slide).width); //視窗層高度
    this.slideHeight = parseInt(getComputedStyle(this.slide).height); //視窗層寬度
    this.startPoint = null; //手指觸摸的起點(diǎn)
    this.navButtons = null; //獲取到所有的導(dǎo)航圓點(diǎn)
    this.timer = null; //定時(shí)器
    this.imgIndex = 1; //當(dāng)前輪播圖片index
    this.prev = null; //上一個(gè)
    this.next = null; //下一個(gè)
    this.speed = -(this.slideWidth / 10 * speed); //動(dòng)畫速度
    this.resetCss(); //初始化css樣式
    this.resetAll(); //初始化設(shè)置
    this.imgs.forEach((el) => {
        el.style.height = `${this.slideHeight}px`;
        el.style.width = `${this.slideWidth}px`;
    }); //使圖片的寬度跟視窗層一樣
    this.autoStart = setInterval(() => {
        this.nextItem()
    }, timeOut);
    //輪播間隔定時(shí)器

    for (let i = 0; i < this.navButtons.length; i++) {
        this.navButtons[i].onclick = this.navButtonClick.bind(this);
    } //綁定導(dǎo)航圓點(diǎn)點(diǎn)擊事件
    //綁定觸摸開始事件
    this.slide.addEventListener("touchstart", this.touchstart.bind(this));
    //綁定觸摸結(jié)束事件
    this.slide.addEventListener("touchend", this.touchend.bind(this));
}
//初始化樣式
Slide.prototype.resetCss = function () {
    let styleEle = document.createElement("style"); //創(chuàng)建style標(biāo)簽
    let navLeft = this.slideWidth / 2 - this.imgs.length * 9;
    let navTop = this.slideHeight / 40;
    styleEle.innerHTML += ".slide{position:relative;overflow:hidden;font-size:0;}"; //舒適化slide視窗的樣式
    styleEle.innerHTML += ".slide .room{position:absolute;}"; //初始化room內(nèi)容層的樣式
    styleEle.innerHTML += ".slide .slide-item{display:inline-block;}"; //設(shè)置slide-item的樣式為內(nèi)聯(lián)塊級元素
    styleEle.innerHTML += `.slide .nav{padding:0 4px;list-style:none;position:absolute;font-size:0px;bottom:${navTop}px;left:${navLeft}px;text-align:center;}`;
    styleEle.innerHTML += ".navButton{display:inline-block;margin:6px 4px;background:#fff;width:8px;height:8px;-moz-border-radius:8px;border-radius:8px;cursor:pointer;box-shadow:0 0 6px #bbb;}";
    document.head.appendChild(styleEle); //插入標(biāo)簽
}

Slide.prototype.resetAll = function () {
    this.slide.setAttribute("class", "slide"); //給slide元素增加class屬性
    this.room.setAttribute("class", "room"); //給room元素增加class屬性
    this.room.style.left = `0px`; //設(shè)置room的初始距離
    this.room.style.width = `${this.slideWidth * (this.imgs.length)}px`; //設(shè)置內(nèi)容層的寬度
    //創(chuàng)建導(dǎo)航圓點(diǎn)定位框
    let nav = document.createElement("ul");
    nav.id = "nav";
    nav.setAttribute("class", "nav");
    this.slide.appendChild(nav);

    for (let i = 0; i < this.imgs.length; i++) {
        let navButtonLi = document.createElement("li");
        navButtonLi.setAttribute("class", "navButton");
        navButtonLi.index = i + 1;
        nav.appendChild(navButtonLi);
    }
    this.navButtons = this.slide.querySelectorAll("li"); //獲取所有的li節(jié)點(diǎn)
    this.navButtons[0].style.background = "#333"; //初始化第一個(gè)圓點(diǎn)的顏色
}
//切換下一個(gè)的函數(shù)
Slide.prototype.nextItem = function () {
    //清除過度定時(shí)器
    clearInterval(this.timer);
    //清除間隔播放定時(shí)器
    clearInterval(this.autoStart);
    this.timer = setInterval(() => {
        let left = parseInt(this.room.style.left);
        if (this.imgIndex < this.imgs.length) {
            if (left > (-this.slideWidth * this.imgIndex)) {
                this.room.style.left = `${parseInt(this.room.style.left)+this.speed}px`;
            } else {
                clearInterval(this.timer);
                this.room.style.left = `${-this.slideWidth*this.imgIndex}px`;
                this.navButtons[this.imgIndex - 1].style.background = "#fff";
                this.imgIndex++;
                this.navButtons[this.imgIndex - 1].style.background = "#333";
            }
        } else {
            if (left < 0) {
                this.room.style.left = `${parseInt(this.room.style.left)+(-this.speed*2)}px`;
            } else {
                clearInterval(this.timer);
                this.room.left = "0";
                this.navButtons[this.imgIndex - 1].style.background = "#fff";
                this.imgIndex = 1;
                this.navButtons[this.imgIndex - 1].style.background = "#333";
            }
        }
    }, 16.7);
    this.autoStart = setInterval(() => {
        this.nextItem()
    }, this.timeOut);
}

Slide.prototype.lastItem = function () {
    clearInterval(this.timer);
    clearInterval(this.autoStart);
    this.timer = setInterval(() => {
        let left = parseInt(this.room.style.left);
        if (this.imgIndex > 1) {
            if (left < (-this.slideWidth * (this.imgIndex - 2))) {
                this.room.style.left = `${parseInt(this.room.style.left)-this.speed}px`;
            } else {
                clearInterval(this.timer);
                this.room.style.left = `${-this.slideWidth*(this.imgIndex-2)}px`;
                this.navButtons[this.imgIndex - 1].style.background = "#fff";
                this.imgIndex--;
                this.navButtons[this.imgIndex - 1].style.background = "#333";
            }
        } else {
            if (left > -this.slideWidth * (this.imgs.length - 1)) {
                this.room.style.left = `${parseInt(this.room.style.left)+(this.speed*2)}px`;
            } else {
                clearInterval(this.timer);
                this.room.left = `${-this.slideWidth*this.imgs.length-1}px`;
                this.navButtons[this.imgIndex - 1].style.background = "#fff";
                this.imgIndex = this.imgs.length;
                this.navButtons[this.imgIndex - 1].style.background = "#333";
            }
        }
    }, 16.7);
    this.autoStart = setInterval(() => {
        this.nextItem()
    }, this.timeOut);
}
Slide.prototype.navButtonClick = function ({
    target
}) {
    clearInterval(this.autoStart);
    clearInterval(this.timer);
    this.timer = setInterval(() => {
        let left = parseInt(this.room.style.left);
        if (target.index > this.imgIndex) {
            if (left > -this.slideWidth * (target.index - 1)) {
                this.room.style.left = `${parseInt(this.room.style.left)+this.speed*(target.index-this.imgIndex)}px`;

            } else {
                clearInterval(this.timer);
                this.room.style.left = `${-(this.slideWidth)*(target.index-1)}px`;
                this.navButtonStyle(target);
            }
        } else if (target.index < this.imgIndex) {
            if (left < -this.slideWidth * (target.index - 1)) {
                this.room.style.left = `${parseInt(this.room.style.left) - this.speed * (this.imgIndex - target.index)}px`;
            } else {
                clearInterval(this.timer);
                this.room.style.left = `${(-this.slideWidth) * (target.index - 1)}px`;
                this.navButtonStyle(target);

            }
        } else {
            return false;
        }
    }, 16.7);
    this.autoStart = setInterval(() => {
        this.nextItem()
    }, this.timeOut);
}
//導(dǎo)航圓點(diǎn)點(diǎn)擊事件
Slide.prototype.navButtonStyle = function (target) {
    target.style.background = "#333";
    this.navButtons[this.imgIndex - 1].style.background = "#fff";
    this.imgIndex = target.index;
}
//手指觸摸起始觸發(fā)函數(shù)
Slide.prototype.touchstart = function (e = window.event) {
    this.startPoint = e.touches[0];
}
//手指觸摸結(jié)束觸發(fā)函數(shù)
Slide.prototype.touchend = function (e = window.event) {
    let endPoint = e.changedTouches[0];
    let x = endPoint.clientX - this.startPoint.clientX;
    let y = endPoint.clientY - this.startPoint.clientY;
    if (Math.abs(x) > this.d) {
        if (x < 0) {
            this.nextItem();
        } else {
            this.lastItem();
        }
    }
}
this.Slide = Slide;
})();

使用說明以及源代碼后續(xù)的優(yōu)化，歡迎關(guān)注我的github 插件地址slide插件

歡迎評論以及留言，同時(shí)歡迎關(guān)注我的博客定時(shí)不斷地更新我的文章 陳建光的博客