js轮播图的实现

1:先写好html的布局;

             <div class="wrap">
                <ul class="list">
                    <%--                轮播图图片--%>
                    <li class="item active"><img src="images/role1.png" class="images_1">    
                    </li>
                    <li class="item"><img src="images/role2.png" class="images_1"></li>
                    <li class="item"><img src="images/role3.png" class="images_1"></li>
                    <li class="item"><img src="images/role4.png" class="images_1"></li>
                    <li class="item"><img src="images/role5.png" class="images_1"></li>
                </ul>
                <%--                轮播图小圆点按钮--%>
                <ul class="pointList">
                    <li class="point active" data-index=0></li>
                    <li class="point" data-index=1></li>
                    <li class="point" data-index=2></li>
                    <li class="point" data-index=3></li>
                    <li class="point" data-index=4></li>
                </ul>
                <div id="btntoo">
                    <span class="btn" id="leftBtn"> < </span>
                    <span class="btn" id="rightBtn"> > </span>
                </div>
            </div>

2:接下来是css的代码;

.wrap {
    width: 750px;
    height: 400px;
    overflow: hidden;
    float: left;
    position: relative;
    transition: all 1.5s;
}
.wrap:hover #leftBtn{
    transition: all 1.5s;
    opacity: 1;
}
.wrap:hover #rightBtn{
    transition: all 1.5s;
    opacity: 1;
}
#leftBtn,#rightBtn{
    transition: all 1.5s;
    opacity: 0;
}
.images_1{
    width: 100%;
    height: 100%;
}
.list {
    width: 800px;
    height: 400px;
    position: relative;
}

.item {
    width: 100%;
    height: 100%;
    list-style: none;
    position: absolute;
    left: 0;
    opacity: 0;
    transition: all .8s;
}
.item.active {
    z-index: 10;
    opacity: 1;
}

.btn {
    width: 60px;
    height: 100px;
    z-index: 100;
    top: 150px;
    position: absolute;
    cursor: pointer;
    display: inline-block;
}

#leftBtn,#rightBtn {
    position: absolute;
    top: 140px;
    left: 30px;
    width: 30px;
    height: 50px;
    font-size: 60px;
    cursor: pointer;
}

#rightBtn {
    left: 690px;
}
.pointList {
    list-style: none;
    padding-left: 0px;
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 200;
}

.point {
    width: 10px;
    height: 10px;
    background-color: antiquewhite;
    border-radius: 100%;
    float: left;
    margin-right: 8px;
    border-style: solid;
    border-width: 2px;
    border-color: slategray;
    cursor: pointer;
}
.point.active{
    background-color: cadetblue;
}

3:剩下的就是js代码了,注释我都写了的;

//轮播图
    let items = document.querySelectorAll(".item");//图片
    let points = document.querySelectorAll(".point")//点
    let left = document.getElementById("leftBtn");
    let right = document.getElementById("rightBtn");
    let all = document.querySelector(".wrap")
    let index = 0;
    let time = 0;//定时器跳转参数初始化


//清除active方法
    let clearActive = function () {
        for (i = 0; i < items.length; i++) {
            items[i].className = 'item';
        }
        for (j = 0; j < points.length; j++) {
            points[j].className = 'point';
        }
    }

//改变active方法
    let goIndex = function () {
        clearActive();
        items[index].className = 'item active';
        points[index].className = 'point active'
    }
//左按钮事件
    let goLeft = function () {
        if (index == 0) {
            index = 4;
        } else {
            index--;
        }
        goIndex();
    }

//右按钮事件
    let goRight = function () {
        if (index < 4) {
            index++;
        } else {
            index = 0;
        }
        goIndex();
    }


//绑定点击事件监听
    left.addEventListener('click', function () {
        goLeft();
        time = 0;//计时器跳转清零
    })

    right.addEventListener('click', function () {
        goRight();
        time = 0;//计时器跳转清零
    })

    for(i = 0;i < points.length;i++){
        points[i].addEventListener('click',function(){
            let pointIndex = this.getAttribute('data-index')
            index = pointIndex;
            goIndex();
            time = 0;//计时器跳转清零
        })
    }
//计时器
    let timer;
    function play(){
        timer = setInterval(() => {
            time ++;
            if(time == 20 ){
                goRight();
                time = 0;
            }
        },100)
    }
    play();
//移入清除计时器
    all.onmousemove = function(){
        clearInterval(timer)
    }
//移出启动计时器
    all.onmouseleave = function(){
        play();
    }

4:让我们看看是什么样子吧!

因为写了鼠标移入移除事件,所以可能看的不是很全面;

里面的><元素是可以隐藏的;