代码：

<!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. Android CardView使用和导入出错问题

    Android CardView使用和导入出错问题 第一部分:导入Android CardView出错的问题. Android CardView是Android在support.v7包里面的一个vie ...

  2. CentOS-6.4-DVD系统中安装Oracle-11.2.0.4

    完整版见https://jadyer.github.io/2014/05/18/centos-install-oracle/ /** * CentOS-6.4-DVD系统中安装Oracle-11.2. ...

  3. Unix域套接字（Unix Domain Socket）介绍【转】

    本文转载自:http://blog.csdn.net/roland_sun/article/details/50266565 版权声明:本文为博主原创文章,未经博主允许不得转载. 在Linux系统中, ...

  4. 换npm yarn的源让install超时去死吧

    安装npm install时,长时间停留在fetchMetadata: sill mapToRegistry uri http://registry.npmjs.org/whatwg-fetch处, ...

  5. Android基础整理

     1.使用Debug方式调试程序 2.使用LogCat方式调试程序  3.使用Toast动态显示信息 4.使用AlertDialog实现提示框.. 5.使用OptionsMenu实现选项菜单

  6. json-server的关系图谱详解（Relationships）

    json-server的关系图谱 json-server是非常好用的一款模拟REST API的工具,文档也很详细和全面.详情:json-server而其中的关系图谱是它非常强大的一个功能,可以非常方便 ...

  7. MyBatis 配置控制台上显示sql语句（log4j.properties 之三）

    ### direct log messages to stdout ###log4j.appender.stdout=org.apache.log4j.ConsoleAppenderlog4j.app ...

  8. P1538 迎春舞会之数字舞蹈

    题目背景 HNSDFZ的同学们为了庆祝春节,准备排练一场舞会. 题目描述 在越来越讲究合作的时代,人们注意的更多的不是个人物的舞姿,而是集体的排列. 为了配合每年的倒计时,同学们决定排出——“数字舞蹈 ...

  9. [转]STL之list容器详解

    List 容器 list是C++标准模版库(STL,Standard Template Library)中的部分内容.实际上,list容器就是一个双向链表,可以高效地进行插入删除元素. 使用list容 ...

  10. VMWare 安装Ubuntu 16.04

    1.新建虚拟机 (1)点击文件-->新建虚拟机 (2)选择 自定义(高级)--> 下一步 (3)选择Workstation 12.0 --> 下一步 (4)选择 稍后安装操作系统 - ...