直接上干货

<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. 【转】gdb的调试与使用

    转载自:https://www.jianshu.com/p/7a06b0bda2d8 gdb的调试与使用 这篇应该是我见过的总结最详细的gdb调试指南了,这位博主是个很强的人,他的博客对萌新比较友好, ...

  2. linux-zookeeper-kafka入门

    公告:版权所有,违者必究 1.zookeeper安装 前提:先安装jdk,zookeeper运行依赖于java环境. (1.)下载安装包 http://mirror.bit.edu.cn/apache ...

  3. C++面向对象程序设计学习笔记（6）

    多态性 编译时的多态性与运行时的多态性 在面向对象方法中,所谓多态性就是不同对象收到相同信息时,产生不同的行为.在c++程序设计中,即"一个接口,多种方法" 在C++中,多态性的实 ...

  4. React中的fetch请求相关

    fetch在reactjs中等同于 XMLHttpRequest,它提供了许多与XMLHttpRequest相同的功能,但被设计成更具可扩展性和高效性. Fetch 的核心在于对 HTTP 接口的抽象 ...

  5. Java实现输出“杨辉三角”

    import java.util.Scanner; public class SumTrangles { public static void func(int n) { if (n < 0) ...

  6. 动态修改maven的jdk版本

    当环境变量jdk为1.7,项目为jdk1.8,用mvn clean package指令打包项目时,想不修改环境变量的情况下,修改maven的jdk版本 方法如下: 官网给出了方法 https://ma ...

  7. 『卧槽』意外发现了 Hashtable 的 foreach 用法 BUG

    这段时间,公司项目中 遇到一个问题,最后查出: 是 Hashtable 的用法导致的. private static void AutoCleanCache() { try { lock (m_Has ...

  8. 探索 ASP.Net Core 3.0系列五：引入IHostLifetime并弄清Generic Host启动交互

    前言:在本文中,我将介绍如何在通用主机之上重新构建ASP.NET Core 3.0,以及由此带来的一些好处. 同时也展示了3.0中引入新的抽象类IHostLifetime,并描述了它在管理应用程序(尤 ...

  9. MySQL统计信息简介

    作者:王小龙@网易乐得DBA 原文地址: http://mp.weixin.qq.com/s/698g5lm9CWqbU0B_p0nLMw MySQL执行SQL会经过SQL解析和查询优化的过程,解析器 ...

  10. 《Web前端开发》等级考试样题~以国家“1+X”职业技能证书为标准，厚溥推出Web前端开发人才培养方案

    1+x证书Web前端开发初级理论考试样题2019 http://blog.zh66.club/index.php/archives/149/ 1+x证书Web前端开发初级实操考试样题2019 http ...