JavaScript：轮播图实现

最新推荐文章于 2024-10-11 21:55:16 发布

郎家岭伯爵

最新推荐文章于 2024-10-11 21:55:16 发布

阅读量128

点赞数

分类专栏：网页技术相关文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43203591/article/details/119671640

版权

网页技术相关专栏收录该内容

12 篇文章 1 订阅

订阅专栏

背景

使用JavaScript实现轮播图效果。

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        img{
            width: 50%;
        }
    </style>
</head>
<body>
    <img id = "pic" src="pic0.jpg">

    <script>
        var number = 0;
        function fun(){
            number ++;
            if (number === 3){
                number = 0;
            }
            pic.src = "pic" +number+ ".jpg"; //需确保轮播图文件在当前项目中
        }
        setInterval(fun, 2000);

    </script>
</body>
</html>