html + js 简单实现轮播图

最新推荐文章于 2023-08-12 09:41:18 发布

乡野码夫

最新推荐文章于 2023-08-12 09:41:18 发布

阅读量1.3k

点赞数 3

分类专栏： html

原文链接：https://www.jianshu.com/p/f84b76b67e86

版权

html 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

实现思路如下：

设置所有图片的 display 属性为 none
设置一个 index 用来标志获取到的图片
设置一个定时器，每隔一段时间令 index 自增并将对应的图片的 display 属性改为 block

html代码：

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

        /*标题样式*/
        p{
            text-align: center;
            font-size: 25px;
            color: cadetblue;
            font-family: fantasy;

        }

        .imgBox{
            border-top: 2px solid cadetblue;
            width: 50%;
            height: 500px;
            margin: 0 auto;

        }

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

        }

        .img1{
            display: block;
        }

        .img2{
            display: none;
        }

        .img3{
            display: none;
        }
    </style>
</head>
<body>
<p>图片轮播</p>
<div class="imgBox">
    <img class="img-slide img1" src="images/1.jpg" alt="1">
    <img class="img-slide img2" src="images/2.jpg" alt="2">
    <img class="img-slide img3" src="images/3.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,2000);
</script>
</html>

乡野码夫

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
html + js 简单实现轮播图

实现思路如下：设置所有图片的 display 属性为 none设置一个 index 用来标志获取到的图片设置一个定时器，每隔一段时间令 index 自增并将对应的图片的 display 属性改为 blockhtml代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图实现</title> <style
复制链接

扫一扫

专栏目录