JS实现轮播图

今天小编我为大家分享一下用js实现轮播图

js效果如下

鼠标悬浮图片停止切换，移出图片继续切换，点击导航区实现对应的图片切换

js需要传递参数banner（String 容器ID，Array 图片地址）

以下js代码可直接使用

/*定义所需要的全局变量*/
var index = 0;
var imgContainer,imgArrNum,lis;
/*清除li的背景色*/
function removeALLClass(eles) {
    for (var i = 0; i < eles.length; i++) {
        eles[i].style.backgroundColor = "white";
    }
}

/*让图片循环切换*/
function move() {
    if (index >= imgArrNum - 1) {
        index = 0;
        imgContainer.style.transition = "none";
    } else {
        index++;
        imgContainer.style.transition = "all 1s linear";
    }
    changeColor(index);
    imgContainer.style.left = -(index * window.innerWidth) + "px";
}
/*导航区随图片变换而变色*/
function changeColor(index) {
    if (index < lis.length) {
        removeALLClass(lis);
        lis[index].style.backgroundColor = "orange";
    } else {
        removeALLClass(lis);
        lis[0].style.backgroundColor = "orange";
    }
}
function banner(id, imgArr) {    /*需要调用的函数*/
    imgArr.push(imgArr[0]);
    imgArrNum = imgArr.length;
    /*1.设置container宽高*/
    var container = document.getElementById(id);
    container.style.width = "100%";
    container.style.overflow = "hidden";
    container.style.position = "relative";
    container.style.height = "390px";

    /*2.添加子元素 imgContainer*/
    imgContainer = document.createElement("div");
    imgContainer.style.width = (imgArrNum * 100) + "%";
    imgContainer.style.height = "100%";
    imgContainer.style.position = "absolute";
    container.appendChild(imgContainer);

    /*3.创建图片*/
    for (var i = 0; i < imgArrNum; i++) {
        var img = document.createElement("img");
        img.src = imgArr[i];
        img.style.width = 100 / imgArrNum + "%";
        img.style.height = "100%";
        imgContainer.appendChild(img);
    }
    /*4.图片移动*/
    imgContainer.style.transition = "all 1s linear";
    imgContainer.style.left = "0px";
    var set = setInterval("move()", 2000);
    imgContainer.onmouseover = function () {
        clearInterval(set);
    };
    imgContainer.onmouseout = function () {
        set = setInterval("move()", 2000);
    };
    /*5.创建导航区*/
    var nav = document.createElement("div");
    container.appendChild(nav);
    var ul = document.createElement("ul");
    nav.appendChild(ul);
    for (var i = 0; i < imgArrNum - 1; i++) {
        var li = document.createElement("li");
        ul.appendChild(li);
        li.style.cssText = "width: 60px;\n" +
            "            height: 10px;\n" +
            "            float: left;\n" +
            "            list-style: none;\n" +
            "            background-color: white;\n" +
            "            margin-right: 10px;\n" +
            "            cursor:pointer;\n" +
            "            border-radius:10px;";
    }
    nav.style.cssText = "position: absolute;\n" +
        "            bottom: 15px;\n" +
        "            left: 50%;\n";
    nav.style.marginLeft = -(70 * (imgArrNum - 1)) / 2 + "px";
    nav.onmouseover = function () {
        clearInterval(set);
    };
    nav.onmouseout = function () {
        set = setInterval("move()", 2000);
    };
    /*设置初始导航区颜色*/
    lis = nav.children[0].children;
    lis[0].style.backgroundColor = "orange";
    /*6.给导航区添加点击事件*/
    for (var i = 0; i < lis.length; i++) {
        !function (i) {
            lis[i].onclick = function () {
                changeImg(i);
            }
        }(i);
    }
    /*点击切换到对应的图片*/
    function changeImg(i) {
        index = i;
        changeColor(index);
        imgContainer.style.transition = "none";
        imgContainer.style.left = -(i * window.innerWidth) + "px";
    }
}