使用JavaScript实现轮播图

最新推荐文章于 2024-01-02 07:57:02 发布

良睿

最新推荐文章于 2024-01-02 07:57:02 发布

阅读量450

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/liangruilz/article/details/90046594

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用JavaScript实现轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
    <img id="img_turn" src="img/banner_1.jpg" width="100%">
    <script>

        //获取图片对象
        var img=document.getElementById("img_turn");
        var num=1;

        //每隔2.5秒切换图片
        function fun() {
            num++;
            if (num>3){
                num=1;
            }
            img.src="img/banner_"+num+".jpg";
        }

        //循环定时器
        setInterval(fun,2500);
    </script>
</body>
</html>