直接上干货

<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. [日常] lscpu查看cpu的详细信息

    查看自己电脑的cpu的详细信息 root@tao-PC:/home/tao# lscpu Architecture: x86_64 CPU op-mode(s): -bit, -bit Byte Or ...

  2. Centos7安装配置----1配置网络

    1.下载镜像安装,选择的是最小安装,设置root用户密码 (此处省略其中步骤,直到安装成功) 2.安装完成后重启,输入用户名密码进入系统 由于此时未配置网络,所以网卡什么的均未获取ip联网 输入ip ...

  3. spark-shell 中rdd常用方法

    centos 7.2     spark 2.3.3      scala 2.11.11    java 1.8.0_202-ea spark-shell中为scala语法格式 1.distinct ...

  4. IEEE754 浮点数

    IEEE754 浮点数 1.阅读IEEE754浮点数 A,阶码是用移码表示的,这里会有一个127的偏移量,它的127相当于0,小于127时为负,大于127时为正,比如:10000001表示指数为129 ...

  5. 【第1题】 Pythonn内存管理以及垃圾回收机制

    内存管理 Python解释器由c语言开发完成,py中所有的操作最终都由底层的c语言来实现并完成,所以想要了解底层内存管理需要结合python源码来进行解释. 1. 两个重要的结构体 include/o ...

  6. MongoDB概念认识（四）

    1. database 一个mongodb中可以建立多个数据库. MongoDB的默认数据库为"db",该数据库存储在data目录中. MongoDB的单个实例可以容纳多个独立的数 ...

  7. Eclipse查看git中的历史，显示详细时间

    clipse show date details in git history我的eclipse查看git history,显示为相对时间,并不是很方便,想要查看某个具体日期的版本代码,就需要设置为具 ...

  8. bolb与base64的图片互转

    直接看图简单明了. 注:便于测试你可以自己用base64图片测试互转一下.这里base64图片太长了就不给予展示了,望理解

  9. QBXT模拟赛2

    总结 期望得分:\(100 + 40 + 0 = 140\) 实际得分:\(0 + 0 + 0 = 0\) 鬼知道为什么我代码没有交上..自测\(10 + 50 + 0\)--这是心态爆炸的一场考试 ...

  10. JSX中引用CSS的一种方法

    第一步:在page或者pages目录下新建一个css文件,例如style.css: 第二步:在jsx页面中import该css文件,例如: import style from './style.css ...