代码：

<!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. 金典 SQL笔记 SQL语句汇总

    SELECT * FROM (SELECT ROW_NUMBER() OVER ( ORDER BY id) AS rowN,FNumber, FName,FSalary ,Fage FROM dbo ...

  2. influx测试——单条读性能很差，大约400条/s，批量写性能很高，7万条/s，总体说来适合IOT数据批量存，根据tag查和过滤场景，按照时间顺序返回

    测试准备 需要将InfluxDB的源码放入 go/src/github.com/influxdata 目录 单写测试代码(write1.go): package main import ( " ...

  3. ES mapping可以修改include_in_all，也可以修改index_options，norm，但是无法修改_all属性！

    ES mapping可以修改include_in_all,也可以修改index_options,norm,但是无法修改_all属性! curl -XPOST "http://localhos ...

  4. Grunt环境搭建及使用

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  5. php验证邮箱是否合法

    下面我来总结了在php邮箱验证的正则表达式以及还可以checkdnsrr函数来验证你输入的邮箱是否是有效的哦,这样可以更好的过滤到无效邮箱地址哦.     域名由各国文字的特定字符集.英文字母.数字及 ...

  6. 关于postman软件的安装与使用

    1.这个软件是一个模拟发请求的软件 2.这个软件和这个网站的 json 格式数据有着很好的关系  https://www.json.cn/ 他能帮助我们分解代码, 3.在使用(修改的)过程中发现了一个 ...

  7. memcache缓存系统

    一.缓存系统 静态web页面: 1.在静态Web程序中,客户端使用Web浏览器(IE.FireFox等)经过网络(Network)连接到服务器上,使用HTTP协议发起一个请求(Request),告诉服 ...

  8. TypeScript `infer` 关键字

    考察如下类型: type PromiseType<T> = (args: any[]) => Promise<T>; 那么对于符合上面类型的一个方法,如何得知其 Prom ...

  9. ACM_汉诺塔问题（递推dp）

    Problem Description: 最近小G迷上了汉诺塔,他发现n个盘子的汉诺塔问题的最少移动次数是2^n-1,即在移动过程中会产生2^n个系列.由于发生错移产生的系列就增加了,这种错误是放错了 ...

  10. Patch 21352635 - Database Patch Set Update 11.2.0.4.8

    一.CPU和PSU 近日,将数据库从9.2.0.6升级到11.2.0.4后,发现11.2.0.4通过DBLINK访问其他的9i库时发生ORA-02072错误,通过Google找到解决方案,即升级到PS ...