最简单的轮播图实现

偏执的太偏执、 2022-05-10 20:40 249阅读 0赞

需求：每隔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>

--------------------

![20191229112121499.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[20191229112121499.png]: /images/20220511/8d0c7a23ac5745adb8257dc1681e306d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220511/334078d6508e41dc92b6a594e18a89c9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，249人围观）

还没有评论，来说两句吧...

相关阅读

相关简单的轮播图实现

轮播图介绍轮播图是在首页上展示信息的一种方式。为了让用户不用滚动屏幕就能看到更多内容，设计师们利用轮播图来最大化信息密度。轮播图有多种形状和大小，但本文中谈及的轮播...

骑猪看日落/ 2024年04月17日 05:32/ 0 赞/ 93 阅读

相关 JavaScript||最简单的轮播图实现

今天给大家分享的是一个具简单的轮播图，只实现了最基本的轮播功能，感兴趣的仁可以康康~ 页面布局由于当时只计划实现简单的自动轮播功能，此次的代码量巨少。页面布局我主要选

本是古典何须时尚/ 2023年05月22日 22:33/ 0 赞/ 27 阅读

相关简单轮播图的实现

简单轮播图的实现 \简单轮播图的实现的思路 1. 所谓的简单轮播图就是指每一个数字按钮对应一张图片，并能够点击数字按钮实现图片的跳转。 2. 其实轮播图就是一个ul列表

柔情只为你懂/ 2023年03月14日 08:19/ 0 赞/ 14 阅读

相关 html中简单轮播图实现原理,jQuery实现一个简单的轮播图

jQuery实现一个简单的轮播图发布时间：2020-08-25 02:23:35 来源：脚本之家阅读：100 作者：nameless-212 html代码：轮

逃离我推掉我的手/ 2022年10月05日 12:44/ 0 赞/ 260 阅读

相关 Android最简单的轮播图实现

最简单的轮播图参考[http://www.cnblogs.com/xurui1995/p/5759371.html][http_www.cnblogs.com_xurui1

淡淡的烟草味﹌/ 2022年07月14日 03:43/ 0 赞/ 212 阅读

相关原生js实现最简单的轮播图

代码部分： html: <div> <ul> <li><img src="01.jpg" width="300px"></li> <l

我就是我/ 2022年05月23日 08:40/ 0 赞/ 218 阅读

相关最简单的轮播图实现

需求：每隔2秒切换一张图片的效果 <!DOCTYPE html> <html lang="en"> <head> <meta char

偏执的太偏执、/ 2022年05月10日 20:40/ 0 赞/ 250 阅读

相关 JS实现最简单的轮播图及其原理

轮播图的实现——最基础的原理方法1（使用setInterval的方法）：看下网上很多教程，不论是html还是css的部分做的都太过于详细了，所以我把代码都尽量缩到

桃扇骨/ 2022年03月20日 08:37/ 0 赞/ 233 阅读

相关 js实现轮播图（简单滚动轮播)

原理：在页面上有一个可视区域（a），用来显示图片，还有一个放所有需要轮播的图片的区域(b) ，当执行操作时，b需要移动，移动一个a的宽度，使下一张图片显示，

冷不防/ 2021年11月10日 09:30/ 0 赞/ 707 阅读

相关轮播图简单实现

如何实现轮播图？根据视频[尚硅谷JavaScript视频][JavaScript]整理得到。思路： ![在这里插入图片描述][2019082110244071

Bertha 。/ 2021年10月24日 05:26/ 0 赞/ 537 阅读