计时器轮播图

最新推荐文章于 2025-04-24 17:30:45 发布

那年牛奶不太纯

最新推荐文章于 2025-04-24 17:30:45 发布

阅读量206

点赞数

文章标签： javascript html 前端

本文链接：https://blog.youkuaiyun.com/Kr__z/article/details/129891032

版权

使用javascript实现轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        .imgBox{
            
            width: 100%;
            height: 250px;
            margin: 0 auto;

        }

        .imgBox img{
            width: 50%;
            height: 400px;
            margin: 0 auto;
            padding-top: 30px;

        }

        .img1{
            display: block;
        }

        .img2{
            display: none;
        }

        .img3{
            display: none;
        }
    </style>
</head>
<body>

<div class="imgBox">
    <img class="img-slide img1" src="./111.jpg" alt="1">
    <img class="img-slide img2" src="./222.jpg" alt="2">
    <img class="img-slide img3" src="./333.jpg" alt="3">
</div>
</body>
<script type="text/javascript">
    var index=0;
    //效果
    function ChangeImg() {
        index++;
        var a=document.getElementsByClassName("img-slide");
        if(index>=a.length) index=0;
        for(var i=0;i<a.length;i++){
            a[i].style.display='none';
        }
        a[index].style.display='block';
    }
    //设置定时器，每隔三秒切换一张图片
    setInterval(ChangeImg,3000);
</script>
</html>