直接上干货

<html>

    <head>

        <title>Banner Cycler</title>

        <script>

            var banners = ["001.jpg","002.jpg","003.jpg"]; // 图片地址

            var counter = 0;

            function run(){

                setInterval(cycle,1000);  //重复运行cycle函数，周期100ms

            }

            function cycle(){

                counter++;

                if(counter == banners.length)

                    counter = 0;

                document.getElementById("banner").src = banners[counter];

            }

        </script>

    </head>

    <body onload = "run();">

        <img id="banner" alt="banner" src="001.jpg">

    </body>

</html>

JavaScript实现的图片循环播放的更多相关文章

  1. 特殊例子--JavaScript代码实现图片循环滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. php广告图片循环播放 幻灯片效果

    <!DOCTYPE> <html> <head> <meta http-equiv="content-type" content=&quo ...

  3. js实现网页上图片循环播放

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/T ...

  4. iOS 用Swipe手势和动画实现循环播放图片

    主要想法 添加3个ImageView展示图片,实现图片的无限循环. 使用Swipe手势识别用户向右或向左滑动图片. 使用CATransition给ImageView.layer添加动画,展示图片更换的 ...

  5. winfrom 循环播放图片

    没啥新东西了,就是遍历和匹配文件名然后获取对象,放到picturebox里面 选中listview中想要查看的图片,然后点击查看按钮,进行↓代码. if (listView1.SelectedItem ...

  6. 使用javascript实现图片上下切换效果并且实现顺序循环播放

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  7. JS可控制的图片自动循环播放查看效果

    JS可控制的图片自动循环播放查看效果 <html> <head> <title>JS可控制的图片自动循环播放查看效果丨芯晴网页特效丨CsrCode.Cn</t ...

  8. JavaScript中让Html页面中循环播放文字

    JavaScript中让Html页面中循环播放文字 <html> <head> <meta http-equiv="Content-Type" con ...

  9. 在WPF中显示GIF图片并实现循环播放

    WPF中有一个MediaElement媒体控件,可以来播放媒体,同时也可以显示GIF图片.但看到网上有些人说用MediaElement不能加载作为资源或内嵌的资源的GIF图片,我猜他们一定是在前台用X ...

随机推荐

  1. Firefox 与 geckodriver 版本兼容问题

    打开 python shell,执行以下脚本: from selenium import webdriverdriver = webdriver.Firefox()driver.maximize_wi ...

  2. js修改对象的key值

    var array = [ { id:1, name:"小明" }, { id:2, name:"小红" } ]; /**/ //旧key到新key的映射 va ...

  3. luoguP1040 加分二叉树

    在做各类DP的时候都要思路清晰! #include<cstdio> #include<algorithm> using namespace std; const int N = ...

  4. ARM的堆栈方式

    当堆栈指针指向最后压入堆栈的数据时,称为满堆栈(Full Stack): 当堆栈指针指向下一个将要放入数据的空位置时,称为空堆栈(Empty Stack): 根据对战的生成方式分为:递增堆栈(Asce ...

  5. 1【西北师大-2108Java】第一次作业成绩汇总

    [西北师大-2108Java]第一次作业成绩汇总 经过本次作业的练习,了解了Java最基本的知识和Java的发展:了解了Java到底是一门怎样的语言,也知道了学习Java的乐趣,懂得了去选择Java开 ...

  6. Pwn-Smashes

    题目地址 https://dn.jarvisoj.com/challengefiles/smashes.44838f6edd4408a53feb2e2bbfe5b229 友链 https://www. ...

  7. 线程让步yield

    一.yield()的作用 yield()的作用是让步.它能让当前线程由“运行状态”进入到“就绪状态”,从而让其它具有相同优先级的等待线程获取执行权:但是,并不能保证在当前线程调用yield()之后,其 ...

  8. Physically Based Shader Development for Unity 2017 Develop Custom Lighting Systems (Claudia Doppioslash 著)

    http://www.doppioslash.com/ https://github.com/Apress/physically-based-shader-dev-for-unity-2017 Par ...

  9. USACO19JAN Gold题解

    噩梦的回忆.. 上周日在机房打的模拟赛,结果十分惨烈,就最后一题yy出了正解结果玄学的只拿了80 考试结果:0+0+80=80 订正时对着T3打了2hours结果还是90 订正结果:100+100+9 ...

  10. Ubuntu18.4编译pmon，缺少makedepend和pmoncfg

    提示makedepend找不到解决方法:$ apt-cache search makedependxutils-dev - X Window System utility programs for d ...