原生js轮播图 | 易学教程

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<style>
    *{
        margin:0px;
        padding:0px;
    }

    li{
        list-style: none;   /*取消li默认的前缀*/
    }

    img{
        display: block;     /*解决图片之间3px的问题*/
    }

    /*用一个容器包裹起来*/
    #container{         
        position: relative;
        margin: 0 auto;
        margin-top: 130px;
        width: 750px;
        height: 352px;
        border: 1px solid #ccc;
    }

    /*隐藏掉容器所有的图片*/
    #container>ul>li{
       position:absolute; 
       display: none;

    }

    /*显示容器中的图片active属性的那张*/
    #container>ul>li.active{
        display: block;
    }
    
    #buttons{
        position: absolute;
        width: 180px;
        height: 20px;
        bottom: 20px;
        left: 50%;
        margin-left: -90px;
        border-radius: 20px;
        background-color:rgba(255, 255, 255, 0.2);
    }

    /*弹性盒子*/
    #buttons>ul{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;            /*垂直方向居中*/
        justify-content:space-around;   /*水平方向居中*/
    }

    #buttons>ul>li{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        text-align: center;
        background-color: #FFF;
    }

    #buttons>ul>li.active_butto{
        background-color: #DB192A;
    }
    #container>.arrow{
        position: absolute;
        width: 30px;
        height: 60px;
        top: 50%;
        margin-top: -30px;
        font-size: 30px;
        line-height: 60px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.1);
        user-select: none;                  /*禁止选中文字*/
    }
    #container>.arrow:hover{
        background: rgba(0, 0, 0, 0.5);
        cursor: pointer;
    }
    #container>#left{
        left: 0px;
    }
    #container>#right{
        right: 0px;
    }
    
</style>
<body>
    <div id="container">
        <!-- 图片 -->
        <ul>
            <li class="active"><img src="./1.jpg" alt="1"></li>
            <li><img src="./2.jpg" alt="2"></li>
            <li><img src="./3.jpg" alt="3"></li>
            <li><img src="./4.jpg" alt="4"></li>
            <li><img src="./5.jpg" alt="5"></li>
        </ul>           
        <!-- 圆点 -->
        <div id="buttons">
            <ul>
                <li class="active_butto">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
        <!-- 箭头 -->
        <span id="left" class="arrow">&lt;</span>
        <span id="right" class="arrow">&gt;</span>
    </div>
<script>
    var container = document.getElementById("container"); /* 获取元素*/
    var bList = document.getElementById("buttons");
    var left = document.getElementById("left");
    var right = document.getElementById("right");
    var lis = container.children[0].children;             /* .children查找该元素的所有子类,返回的是类数组*/
    var blis = bList.children[0].children;
    var len = lis.length;
    var index = 0;  
    var timer;  
    var next = function() {
        lis[index].removeAttribute("class");                            /*移除属性*/
            blis[index].removeAttribute("class");                       /*移除属性*/
            index++;                                                    /*设置标志*/
            if(index == len){
                index = 0;
            }                    
            lis[index].setAttribute("class", "active");                 /*添加属性*/ 
            blis[index].setAttribute("class", "active_butto");          /*添加属性*/ 
    }                                   
    var autoPlay = function() {
            timer = setInterval(function() { 
            next();           
        },2000);
    }
    autoPlay();
    container.onmouseenter = function() {
        clearInterval(timer);
    }
    container.onmouseleave = function() {
        autoPlay();
    }
    for(var i = 0; i < blis.length; i++) {
        blis[i].onmouseover = (function(i) {              /*使用闭包解决函数循环先执行导致i一直是6的问题*/
            return function() {                             
                lis[index].removeAttribute("class");                    /*移除属性*/
                blis[index].removeAttribute("class");
                index = i;
                lis[index].setAttribute("class", "active");             /*添加属性*/ 
                blis[index].setAttribute("class", "active_butto");
            };
        })(i);
    }
    left.onclick = function() {
        lis[index].removeAttribute("class");              /*移除属性*/
        blis[index].removeAttribute("class");
        index--;
        if(index < 0){
                index = blis.length - 1;
        }                    
        lis[index].setAttribute("class", "active");       /*添加属性*/ 
        blis[index].setAttribute("class", "active_butto");       /*添加属性*/ 
    }
    right.onclick = function() {
        next();
    }
</script>
</body>
</html>
来源：CSDN
作者：xxTheodore
链接：https://blog.csdn.net/xxTheodore/article/details/103862833
标签
轮播