console 命令行工具 X clear

console

const imgArr =[
    'https://pic2.zhimg.com/v2-aff98fe9244a36744465a091348c8946_r.jpg?source=1940ef5c',
    'https://pic1.zhimg.com/v2-2ff3dfb998cb81d2679e64b7a8aab9b7_r.jpg?source=1940ef5c',
    'https://pic2.zhimg.com/v2-da9aadd472e2cda1c17faca85eb3f482_r.jpg?source=1940ef5c',
];
const img = document.querySelector(".carousel-img");
const itemBtn = document.querySelectorAll(".switch-item div");

itemBtn.forEach((item,index)=>{
    item.onclick = function(){
        active(index);
        swap(index);
    }
})

function swap(index){
 img.src = imgArr[index];
}

function active(index){
        for(let i=0;i<itemBtn.length;i++){
            itemBtn[i].className = 'item-btn';
        }
        itemBtn[index].className = 'active';
}

let i = 0;
setInterval(function(){
 active(i);  
 img.src = imgArr[i++];
 if(i%imgArr.length==0)
  i=0;
 
},3000);

<html>
    <body>
        <div class="carousel">
            <div class="img">
                <img class="carousel-img" src="https://pic2.zhimg.com/v2-aff98fe9244a36744465a091348c8946_r.jpg?source=1940ef5c"/>
            </div>
            <div class="switch">
                <ul class="switch-items"">
                    <li class="switch-item">
                        <div class="active"></div>
                    </li>
                    <li class="switch-item">
                        <div class="item-btn"></div>
                    </li>
                    <li class="switch-item">
                        <div class="item-btn"></div>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>

.carousel{
    background-color:antiquewhite;
    width:900px;
    height: 450px;
    margin: 150px auto;
    position: relative;
}
.img{
    width:100%;
    height: 100%;
}
.img img{
    width: 900px;
    height: 450px;
}
.switch{
    position: absolute;
    width: 100%;
    height: 10%;
    bottom:0%;
}
.switch-items{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.switch-item{
    list-style: none;
    margin-left: 10px;
}
.item-btn{
   width: 16px;
   height: 16px;
   background-color: gainsboro;
   border-radius: 50%;
   cursor: pointer;
   transition: all ease 0.3s;
}
.item-btn:hover{
   width: 16px;
   height: 16px;
   background-color: black;
   border-radius: 50%;
   cursor: pointer;
}

.active{
   width: 16px;
   height: 16px;
   background-color: black;
   border-radius: 50%;
   cursor: pointer;
   box-shadow: 0 0 10px skyblue;
}