图片轮播：

需要注意的HTML需要img标签，他和input标签一样，是非封闭的标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>广告轮播</title>

<script src="广告轮播.js"></script>

</head>

<body>

<img id="img1" src="data:image/rose.jpg" />

</body>

</html>

JavaScript：

现在只需要改变JavaScript中数组元素的值即可改变图片

// JavaScript Document

var imageArray = ['apple.jpg','rose.jpg'];

var timer;

var index = 1;

function rotateFunc(){

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

    img.src = "image/"+imageArray[index];

    if(index==imageArray.length-1)

        index = 0;

    else

        index++;

    }

function startRotate(){

    timer = window.setInterval(rotateFunc,1000);

    }

window.addEventListener('load',startRotate,false);

JavaScript对象(document对象 图片轮播)的更多相关文章

  1. 使用javascript,jquery实现的图片轮播功能

    使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...

  2. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  3. 超实用的JavaScript代码段 Item3 --图片轮播效果

    图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...

  4. JavaScript学习---简易图片轮播

    效果如下: 图片定时轮播 点击左右控制显示下一张或上一张图片 index.html文件 <html> <head> <title> js编写实现幻灯片效果 < ...

  5. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  6. javaScript 手写图片轮播

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. Javascript图片轮播

    原文链接:http://www.imooc.com/article/7393 编辑HTML代码: <div id="wrap"><!--图片展示区--> & ...

  8. javascript 实现图片轮播和点击切换功能

    图片轮播是网页上一个比较常见的功能,下面我们来实现他吧 原理很简单: 1:固定的区域,所有的图片重叠,一次只能显示一张图片 2:通过改变图片的zIndex属性改变显示的图片,就可以达到切换的效果了 & ...

  9. JavaScript图片轮播，举一反三

    图片轮播,在一些购物网站上运用的不胜枚举,下面简单介绍一下图片轮播的实现. 如图 <!doctype html> <html lang="en"> < ...

随机推荐

  1. [c/c++]指针数组 pk 数组指针

    首先强调 指针数组归根结底是个数组:数组指针归根结底是个指针. 数组指针 以int (*int)[10]为例 ()的优先级大于[],因此首先它是一个指针,它指向一个数组,数组的维数是10.因此数组指针 ...

  2. jQuery deferred when用法

    一.什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们 ...

  3. SPOJ 416 Divisibility by 15 细节题

    一个结论:一个数,如果它的所有数字之和能被3整除,那么这个数也能被3整除. 最后一位肯定是0或者5,如果没有就impossible. 剩下的就是,如何删除尽量少的数,使所有数字之和为3的倍数. 情况比 ...

  4. eclipse中servers（服务器）的配置

    eclipse中servers(服务器)的配置 使用eclipse+tomcat时,很多人喜欢安装tomcat插件,以便一键启动tomcat,但我不喜欢给eclipse安装一些非必须的插件,而ecli ...

  5. SQLite学习手册(内置函数)

    一.聚合函数: SQLite中支持的聚合函数在很多其他的关系型数据库中也同样支持,因此我们这里将只是给出每个聚集函数的简要说明,而不在给出更多的示例了.这里还需要进一步说明的是,对于所有聚合函数而言, ...

  6. python公司面试题集锦 python面试题大全

    问题一:以下的代码的输出将是什么? 说出你的答案并解释. class Parent(object): x = 1 class Child1(Parent): pass class Child2(Par ...

  7. poj - 2386 Lake Counting && hdoj -1241Oil Deposits (简单dfs)

    http://poj.org/problem?id=2386 http://acm.hdu.edu.cn/showproblem.php?pid=1241 求有多少个连通子图.复杂度都是O(n*m). ...

  8. java之并发

    一.线程 在java中多线程执行任务,主要有两种方式,一种是通过继承Thread类,重写run方法,优点是比较方便的创建一个线程,缺点是java中每个类只能有一个基类,所有继承了T火热ad类后,就不能 ...

  9. MFC弹出菜单隐藏解决

    http://social.msdn.microsoft.com/Forums/en-US/5482103e-272b-4c9f-bac4-be15f14782bd/cmfcmenubar-remov ...

  10. LA 4255 (拓扑排序 并查集) Guess

    设这个序列的前缀和为Si(0 <= i <= n),S0 = 0 每一个符号对应两个前缀和的大小关系,然后根据这个关系拓扑排序一下. 还要注意一下前缀和相等的情况,所以用一个并查集来查询. ...