原生js實現輪播圖生成器

DIV原型添加輪播圖生成器方法，固定寬高的div調用該方法自動生成一個封裝好的輪播圖框架，只須要傳入輪播圖有效圖片路徑的數組便可。

注意：該div必須有寬高！！！

使用：

將下面js代碼放入一個js文件，使用的時候引入便可。

例如：

var odiv = document.getElementById('#divId');

odiv.createTurnPage([''1.png,'2.png'])；

 

/*原生js實現輪播圖生成器 */

HTMLDivElement.prototype.createTurnPage = function (imageArray) {

    if (!imageArray) {

        return;

    }

    /* 輪播圖展現圖片數量 */

    var sliderNum = imageArray.length;

    /* 輪播圖展現寬度 */

    var sliderWidth = this.offsetWidth;

    /* 輪播圖展現高度 */

    var sliderHeight = this.offsetHeight;

    /* 輪播圖按鈕寬高 */

    var btnLen = 40;

    /* 輪播圖圓點寬高 */

    var dotLen = 10;

    /* 建立dom及樣式 start */

    /* 給該div添加所需屬性 */

    this.style.position = "relative";

    this.style.overflow = "hidden";

    /* div裏面建立ul */

    var newUl = document.createElement('ul');

    newUl.style.position = "absolute";

    newUl.style.width = (sliderNum + 1) * sliderWidth + 'px';

    newUl.style.height = sliderHeight + 'px';

    this.appendChild(newUl);

    /* ul裏面建立li */

    for (var i = 0; i < sliderNum + 1; i++) {

        var newLi = document.createElement('li');

        newLi.style.width = sliderWidth + 'px';

        newLi.style.height = sliderHeight + 'px';

        newLi.style.cssFloat = 'left';

        newUl.appendChild(newLi);

        /* li裏面建立img */

        var newImg = document.createElement('img');

        newImg.style.width = '100%';

        newImg.style.height = '100%';

        if (i == sliderNum) {

            newImg.src = imageArray[0];

        } else {

            newImg.src = imageArray[i];

        }

        newLi.appendChild(newImg);

    }

    /* div裏面建立左右按鈕 */

    for (var i = 0; i < 2; i++) {

        var newBtn = document.createElement('div');

        newBtn.style.width = btnLen + 'px';

        newBtn.style.height = btnLen + 'px';

        newBtn.style.lineHeight = btnLen + 'px';

        newBtn.style.color = '#ffffff';

        newBtn.style.backgroundColor = '#000000';

        newBtn.style.opacity = 0.2;

        newBtn.style.textAlign = 'center';

        newBtn.style.top = '50%';

        newBtn.style.marginTop = -btnLen/2 + 'px';

        newBtn.style.cursor = 'pointer';

        newBtn.style.position = 'absolute';

        if (i == 0) {

            newBtn.innerText = '<';

            newBtn.style.left = 10 + 'px';

            newBtn.className = 'turnPageLeftBtn';

        } else {

            newBtn.innerText = '>';

            newBtn.style.right = 10 + 'px';

            newBtn.className = 'turnPageRightBtn';

        }

        this.appendChild(newBtn);

    }

    /* 鼠標移入div 按鈕背景色變深 */

    var leftBtnDiv = this.getEleByClassName('turnPageLeftBtn')[0];

    var rightBtnDiv = this.getEleByClassName('turnPageRightBtn')[0];

    this.onmouseover = function () {

        leftBtnDiv.style.opacity = 0.7;

        rightBtnDiv.style.opacity = 0.7;

    }

    /* 鼠標移出div 按鈕背景色變深 */

    this.onmouseout = function () {

        leftBtnDiv.style.opacity = 0.2;

        rightBtnDiv.style.opacity = 0.2;

    }

    /* 建立變色小點 */

    var newDotDiv = document.createElement('div');

    newDotDiv.style.width = '100%';

    newDotDiv.style.position = 'absolute';

    newDotDiv.style.bottom = 10 + 'px';

    newDotDiv.style.textAlign = 'center';

    this.appendChild(newDotDiv);

    for (var i = 0; i < sliderNum; i++) {

        var newSpan = document.createElement('span');

        newSpan.style.display = "inline-block";

        newSpan.style.backgroundColor = "#ffffff";

        newSpan.style.width = dotLen + 'px';

        newSpan.style.height = dotLen + 'px';

        newSpan.style.borderRadius = '50%';

        newSpan.style.cursor = 'pointer';

        newSpan.style.marginLeft = 5 + 'px';

        newSpan.style.marginRight = 5 + 'px';

        if (i == 0) {

            newSpan.style.backgroundColor = "#f40";

        } else {

            newSpan.style.backgroundColor = "#ffffff";

        }

        newDotDiv.appendChild(newSpan);

    }

    /* 建立dom及樣式 end */

    /* 建立事件 start */

    var sliderUl = this.getElementsByTagName('ul')[0];

    /* 自動輪播定時器 */

    var timer = setInterval(function () {

        sliderMove(sliderUl);

    }, 1000);

    /* 左側按鈕點擊切換輪播圖事件 */

    leftBtnDiv.onclick = function () {

        sliderMove(sliderUl, 'left');

    }

    /* 右側按鈕點擊切換輪播圖事件 */

    rightBtnDiv.onclick = function () {

        sliderMove(sliderUl, 'right');

    }

    /* 變色小點點擊切換輪播圖事件 */

    var sliderSpanArray = newDotDiv.getElementsByTagName('span');

    for (var i = 0; i < sliderSpanArray.length; i++) {

        (function(index){

            sliderSpanArray[index].onclick = function () {

                lock = true;

                clearInterval(timer);

                startMove(sliderUl, { left: -sliderWidth * index }, function () {

                    timer = setInterval(function () {

                        sliderMove(sliderUl);

                    }, 1500);

                    lock = false;

                    sliderIndex = index;

                    changeIndex(sliderIndex);

                })

            }

        }(i))

    }

    /*輪播移動事件 direction left:向左輪播 right：向右輪播  默認：向左*/

    var lock = false;

    var sliderIndex = 0;

    function sliderMove(dom, direction) {

        // debugger;

        if (!lock) {

            lock = true;

            clearInterval(timer);

            if (!direction || direction == 'left') {

                sliderIndex++;

                startMove(dom, { left: dom.offsetLeft - sliderWidth }, function () {

                    if (dom.offsetLeft == -sliderNum * sliderWidth) {

                        dom.style.left = '0px';

                        sliderIndex = 0;

                    }

                    timer = setInterval(function () {

                        sliderMove(sliderUl);

                    }, 1500);

                    lock = false;

                    changeIndex(sliderIndex);

                })

            } else if (direction == 'right') {

                if (dom.offsetLeft == 0) {

                    dom.style.left = -sliderNum * sliderWidth + 'px';

                    sliderIndex = sliderNum;

                }

                sliderIndex--;

                startMove(dom, { left: dom.offsetLeft + sliderWidth }, function () {

                    timer = setInterval(function () {

                        sliderMove(sliderUl);

                    }, 1500);

                    lock = false;

                    changeIndex(sliderIndex);

                })

            }

        }

    }

    /* 改變變色小點方法 */

    function changeIndex(index) {

        for (var i = 0; i < sliderSpanArray.length; i++) {

            sliderSpanArray[i].style.backgroundColor = "#ffffff";

        }

        sliderSpanArray[index].style.backgroundColor = "#f40";

    }

    /* 建立事件 end */

    /* 多物體不一樣值運動 */

    function startMove(dom, attrObj, callback) {

        clearInterval(dom.timer);

        var speed = null;

        var currentValue = null;

        dom.timer = setInterval(function () {

            var bStop = true;

            for (attr in attrObj) {

                if (attr == 'opacity') {

                    currentValue = parseFloat(getStyle(dom, attr)) * 100;

                } else {

                    currentValue = parseInt(getStyle(dom, attr));

                }

                speed = (attrObj[attr] - currentValue) / 5;

                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                if (attr == 'opacity') {

                    dom.style[attr] = (currentValue + speed) / 100;

                } else {

                    dom.style[attr] = currentValue + speed + 'px';

                }

                if (currentValue != attrObj[attr]) {

                    bStop = false;

                }

            }

            if (bStop) {

                clearInterval(dom.timer);

                if (typeof (callback) == "function") {

                    callback();

                }

            }

        }, 30);

    }

    /* 獲取樣式 */

    function getStyle(dom, attr) {

        if (window.getComputedStyle) {

            return window.getComputedStyle(dom, null)[attr];

        } else {

            return dom.currentStyle[attr];

        }

    }

}

/* 封裝兼容性根據類名獲取dom */

Element.prototype.getEleByClassName = Document.prototype.getEleByClassName = function (_className) {

    var tagArray = [].slice.call(this.getElementsByTagName('*'), 0);

    var resultArray = [];

    function trimSpace(str) {

        var reg = /\s+/g;

        return str.replace(reg, ' ');

    }

    // debugger;

    tagArray.forEach(element => {

        var targetStr = trimSpace(element.className).trim();

        var strArray = targetStr.split(' ');

        console.log(strArray);

        strArray.forEach(element1 => {

            if (element1 == _className) {

                resultArray.push(element);

                return false;

            }

        })

    });

    return resultArray;

}