最简单的轮播图实现

最新推荐文章于 2024-05-12 03:32:06 发布

极地雪狼li

最新推荐文章于 2024-05-12 03:32:06 发布

阅读量2.1k

点赞数 3

分类专栏： web前端文章标签： js 轮播 web

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/xuehu837769474/article/details/82784267

版权

web前端专栏收录该内容

53 篇文章 20 订阅

订阅专栏

需求：每隔2秒切换一张图片的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style type="text/css"></style>
    <script type="text/javascript">
        //设置定时器
        window.setInterval("changeImage()",2000);
        var count =1;    //在调用函数的时候0.jpg已经显示，如果num=0，那么在执行下面函数时，0.jpg会再次显示2秒
        //设置寻找图片的函数
        function changeImage() {
            var img = document.getElementById("img");//img对象就相当于img标签
            if (count < 5) {
                img.src = "img/" + count + ".jpg";
                count++;
            }else {
                count= 0;
                changeImage();
            }
        }
    </script>
</head>
<body>
<img src="img/0.jpg" id="img" width="600px" height="400px"/>
</body>
</html>

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

极地雪狼li

关注关注

3
点赞
踩
19

收藏

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

需求：每隔2秒切换一张图片的效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图</title> <style type="text/css"></style> &l...
复制链接

扫一扫