代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <script>

        var index = 0;

        function changeImg() {

            // 获得要切换图片的那个元素

            var img = document.getElementById("img1");

            //计算出当前要切换到第几张图片

            var curIndex = index % 3 + 1;  //0,1,2

            img.src = "img/" + curIndex + ".jpg";  //1,2,3

            //每切换完,索引加1

            index = index + 1;

        }

        function init() {

            setInterval("changeImg()", 3000);

        }

    </script>

</head>

<body onload="init()">

    <img src="img/1.jpg" width="1920" id="img1"/>

</body>

</html>

JS练习：替换式图片自动轮播的更多相关文章

  1. 2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码

    css代码 背景与前景 background-color:#0000; //背景色,样式表优先级高 background-image:url(路径); //设置背景图片 background-atta ...

  2. AJ学IOS（11）UI之图片自动轮播

    AJ分享,必须精品 先看效果 代码 #import "NYViewController.h" #define kImageCount 5 @interface NYViewCont ...

  3. 仿网易新闻 ViewPager 实现图片自动轮播

    新闻 App 首页最上方一般会循环播放热点图片,如下图所示. 本文主要介绍了利用 ViewPager 实现轮播图片,图片下方加上小圆点指示器标记当前位置,并利用 Timer+Handler 实现了自动 ...

  4. ios - 图片自动轮播定时器(NSTimer)以及消息循环模式简介

    本文只是演示如何设置图片轮播的定时器. 创建全局变量NSTimer 程序启动后就开始轮播图片,所以在- (void)viewDidLoad中就启动定时器. 将定时器放入消息循环池中.- (void)v ...

  5. js和jquery实现图片无缝轮播的不同写法

    多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三 下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便 还有非常有逼格的 ...

  6. 原生javascript实现图片自动轮播和点击轮播代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 用jquery写出图片自动轮播效果

    相关代码如下,只要把代码粘贴进编辑器,修改图片路径,即可看到效果. 1.html部分 <body>   <ul class="banner">   < ...

  8. Viewpager图片自动轮播，网络图片加载，图片自动刷新

    package com.teffy.viewpager; import java.util.ArrayList; import java.util.concurrent.Executors; impo ...

  9. Wpf实现图片自动轮播自定义控件

    近来,公司项目需要,需要写一个自定义控件,然后就有下面的控件产生.样式没有定义好,基本功能已经实现.1.创建为自定义控件的XAML页面.下面为后台代码 using System; using Syst ...

随机推荐

  1. 李洪强经典面试题31- FMDB

    n什么是FMDB pFMDB是iOS平台的SQLite数据库框架 pFMDB以OC的方式封装了SQLite的C语言API p nFMDB的优点 p使用起来更加面向对象,省去了很多麻烦.冗余的C语言代码 ...

  2. Redux 源码解读--createStore,js

    一.依赖:$$observable.ActionTypes.isPlainObject 二.接下来看到直接 export default 一个 createStore 函数,下面根据代码以及注释来分析 ...

  3. Android资源之图像资源（图像级别资源）

    图像状态资源仅仅能定义有限的几种状态. 假设须要很多其它的状态,就要使用图像级别资源. 在该资源文件里能够定义随意多个图像级别. 每一个图像级别是一个整数区间,能够通过ImageView.setIma ...

  4. 百度MP3+图片+文字：生成结果文件；（声音58秒，视频59秒，同步性需要进一步优化）

    import os os_sep = os.sep this_file_abspath = os.path.abspath(__file__) this_file_dirname, this_file ...

  5. Prevent the "split brain" by configuring the majority of nodes

    ## Prevent the "split brain" by configuring the majority of nodes (total number of nodes / ...

  6. Versioning with the Override and New Keywords (C# Programming Guide)

    The C# language is designed so that versioning between base and derived classes in different librari ...

  7. codeforces 764D

    脑洞 很早以前没有补掉的题目 四色问题肯定使有解的,然后就是怎么构造.注意到边长是奇数,那么我们就可以分类,按左上角坐标的奇偶性分类,正好对应四种颜色.因为当两个矩形左上角横纵坐标奇偶性不同时,那么肯 ...

  8. 如何通过XInput技术针对游戏方向盘或者手柄编程

    目前市面上的游戏外设,要么支持传统的DirectInput接口,要么支持最新的XInput技术.今天在这里聊一聊,如何通过XInput技术实现对这类游戏外设相关信息的捕获.关于DirectInput与 ...

  9. PCB genesis 大孔扩孔(不用G84命令)实现方法

    PCB钻孔时,当钻刀>6.3mm时,超出钻孔范围,钻孔工序是没有这么大的钻刀,当这种情况,工程CAM会都采用G84命令用小孔扩孔的方式制作, 在这里介绍一种如果不用G84命令,用程序实现将大孔生 ...

  10. 9.12NOIP模拟题

    NOIP 2017 全假模拟冲刺                                               hkd 题目名称 Spfa 走楼梯缩小版 滑稽 题目类型 传统 传统 传统 ...