JavaScript(六)_BOM_window对象_轮播图案例

最新推荐文章于 2024-01-04 16:39:57 发布

原创最新推荐文章于 2024-01-04 16:39:57 发布 · 156 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的简易轮播图方法，通过定时器自动切换图片，适用于初学者理解和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

每隔一段时间切换一个图片

如果想增加图片个数，可以修改number值

如果想改图片可以把图片都起格式一样的名字，如***_1.jpg、***_2.jpg、***_3.jpg...，放在项目的一个文件夹下，然后修改下面代码的图片路径

如果想修改图片切换之间的时间，可以把setInterval(fun,3000)第二个参数修改一下，单位为ms

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>

</head>
<body>
    <img id="1" width="100%" src="img/banner_1.jpg">
    <script>
        /*
            分析：
                1.在页面上使用img'标签展示图片
                2.定义一个方法，修改图片对象的suc属性
                3.定义一个定时器，每隔一定时间，调用这个方法一次
         */

        //修改图片的src属性的方法
        var number=1;
        function fun() {
            number++;

            //判断number是否大于3
            if (number>3){
                number=1;
            }
            var img1 = document.getElementById("1");
            img1.src="img/0"+number+".jpg";

        }

        setInterval(fun,3000);
    </script>
</body>
</html>