JS轮播图的实现

最新推荐文章于 2024-08-27 15:59:21 发布

K I N G

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量117

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/z2000ky/article/details/127925737

版权

第一部完成html的代码

<body>
    <div class="carouselChart">
        <!-- 轮播图片 -->
        <ul class="list">
            <li class="item active"><img src="./img/18骑士.jpg" alt=""  ></li>
            <li class="item"><img src="./img/234750-158921207008d8.jpg" alt=""></li>
            <li class="item"><img src="./img/cb (2).jpg" alt=""></li>
            <li class="item"><img src="./img/女孩少女 绑头发 皮筋 厚涂画风 4k动漫壁纸_彼岸图网.jpg" alt=""></li>
            <li class="item"><img src="./img/长发少女黑色吊带裙+好看的4k动漫美女壁纸3840x2160_彼岸图网 (1).jpg" alt=""></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>
        <!-- 左右切换 -->
        <button class="btn" id="leftBtn"> < </button> 
        <button class="btn" id="rightBtn"> > </button>
 
    </div>
</body>

第二步CSS样式的编写

.carouselChart {
    width: 800px;
    height: 400px;
    position: relative;
}

.list {
    width: 800px;
    height: 400px;
    position: relative;
    padding-left: 0px;
}

.item {
    width: 100%;
    height: 100%;
    list-style: none;
    position: absolute;
    left: 0;
    opacity: 0;
    transition: all .8s;
}
img{
    width: 100%;
    height: 100%;
}


.item.active {
    z-index: 10;
    opacity: 1;
}

.btn {
    width: 60px;
    height: 100px;
    z-index: 100;
    top: 150px;
    position: absolute;
}

#leftBtn {
    left: 0px;
}

#rightBtn {
    right: 0px;
}

.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;
}

最后一步js代码的书写

<script>
        var items = document.querySelectorAll(".item");//图片节点
        var points = document.querySelectorAll(".point")//点
        var left = document.getElementById("leftBtn");
        var right = document.getElementById("rightBtn");
        var carouselChartEle = document.querySelector(".wrap")
        var index = 0;
        var time = 0;//定时器跳转参数初始化
        
 
        //封装一个清除active方法
        var 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方法
        var goIndex = function () {
            clearActive();
            items[index].className = 'item active';
            points[index].className = 'point active'
        }
        //左按钮事件
        var goLeft = function () {
            if (index == 0) {
                index = 4;
            } else {
                index--;
            }
            goIndex();
        }
 
        //右按钮事件
        var 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(){
                //getAttribute返回元素上一个指定的属性值
                var pointIndex = this.getAttribute('data-index')
                index = pointIndex;
                goIndex();
                time = 0;//计时器跳转清零
            })
        }
        //计时器轮播效果
        var timer;
        function play(){
         timer = setInterval(() => {
            time ++;
            if(time == 20 ){
                goRight();
                time = 0;
            }    
        },100)
    }
        play();
        //移入清除计时器
        //onmousemove在鼠标指针移到指定的元素后执行Javascript代码
        carouselChartEle.onmousemove = function(){
            clearInterval(timer)
        }
       //移出启动计时器
       //onmouseleave在鼠标指针移出指针时执行JavaScript代码
       carouselChartEle.onmouseleave = function(){
            play();
        }
    </script>