轮播图js代码实现示例（原生）

今天做网站的时候需要用上JS轮播图代码，而且还要求是原生的JS代码。

这里，我就给大家提供一个纯Js轮播图示例代码，大家可在此基础上进行改进，包括指示器的样式，容器的大小，按钮的样式，轮播时间等等都可以修改的。该代码通俗易懂，Js部分逻辑清晰。大家完全可以创造出属于自己的样式！

JS轮播图代码：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS轮播图代码示例 - 付杰博客</title>
</head>
<body>
<!--CSS代码-->
<style>
    *{
        list-style: none;
    }
    #wrap {
        width: 590px;
        height: 470px;
        margin: 150px auto;
        position: relative;
        cursor: pointer;
    }

    #pic li {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

    #num {
        position: absolute;
        z-index: 2;
        bottom: 20px;
        left: 46px;
    }

    #num li {
        float: left;
        width: 8px;
        height: 8px;
        margin: 5px;
        border-radius: 50%;
        border: 1px solid #FFFFFF;
        line-height: 20px;
        background: transparent;
        text-align: center;
    }

    #num li.active {
        background:  #fefefe;
    }

    .arrow {
        z-index: 3;
        height: 40px;
        width: 30px;
        position: absolute;
        top: 45%;
        line-height: 40px;
        background: rgba(0, 0, 0, 0.3);
        text-align: center;
        display: none;
    }
    #wrap:hover .arrow {
        display: block;
    }
    .arrow:hover {
        background: rgba(0, 0, 0, 0.7);
    }


    #left {
        left: 0;
    }

    #right {
        right: 0;
    }

</style>

<!-- HTML 代码 -->
<!-- 注意：轮播图开始注意这里的图片路径，一定要使用自己的图片路径！-->
<div id="wrap">

    <ul id="pic">
        <li style="display: none;"><img src="1.jpg" alt=""></li>
        <li style="display: none;"><img src="2.jpg" alt=""></li>
        <li style="display: block;"><img src="3.jpg" alt=""></li>
        <li style="display: none;"><img src="4.jpg" alt=""></li>
        <li style="display: none;"><img src="5.jpg" alt=""></li>
        <li style="display: none;"><img src="6.jpg" alt=""></li>
        <li style="display: none;"><img src="7.jpg" alt=""></li>
    </ul>
    <ul id="num">
        <li class="active"></li>
        <li class=""></li>
        <li class=""></li>
        <li class=""></li>
        <li class=""></li>
        <li class=""></li>
        <li class=""></li>
    </ul>
    <a href="javascript:;" class="arrow" id="left">&lt;</a>
    <a href="javascript:;" class="arrow" id="right">&gt;</a>
</div>

<!-- 原生 Js 代码-->
<script type="text/javascript">
    function $(id) {
        return document.getElementById(id);
    }
    window.onload = function() {
        var oLeft = $("left");
        var oRight = $("right");
        var index = 0;
        var timer = null;
        var pic = $("pic").getElementsByTagName("li");
        var num = $("num").getElementsByTagName("li");
        var oDiv = $("wrap");

        oRight.onclick = function() {
            index++;
            if (index >= pic.length) {
                index = 0;
            }
            change(index);
        }
        oLeft.onclick = function() {
            index--;
            if (index < 0) {
                index = pic.length - 1;
            }
            change(index);
        }
        oDiv.onmouseover = function() {
            clearInterval(timer);
        }
        oDiv.onmouseout = function() {
            timer = setInterval(run, 2000); //鼠标移出后重新开始定时器
        }

        timer = setInterval(run, 4000); //定时器

        function run() { //用于定时器的函数
            index++;
            if (index >= pic.length) {
                index = 0;
            }
            change(index);
        }

        for (var i = 0; i < num.length; i++) {
            num[i].index = i; //把索引值存起来
            num[i].onmouseover = function() {
                change(this.index);
            }
        }

        function change(curindex) { //用于切换图片的函数
            for (var i = 0; i < pic.length; i++) {
                pic[i].style.display = "none";
                num[i].className = "";
            }
            pic[curindex].style.display = "block";
            num[curindex].className = "active";
            index = curindex;
        }
    }
</script>


</body>
</html>

最终效果图如下：