图片轮播：

需要注意的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. Linux命令-wc

    wc命令用于统计指定文本的行数.字数.字节数 格式:wc [参数] 文本 [root@localhost test]# wc test.txt test.txt [root@localhost tes ...

  2. SSIS -->> Variable

    变量的特点: 1)大小写敏感 2)可见范围限制,里层可以看到外层,外层看不到里层的: 在属性窗口开启EvaluateAsExpression选项可以支持expression动态赋值变量

  3. 《Java编程那点事儿》读书笔记（四）——String和StringBuffer

    String 1.toString:显示对象内容时系统自动调用的方法. public class TOSTRING { public String toString(){ return "t ...

  4. 8021x 获取IP信息失败，请检查锐捷认证客户端当前配置是否符合所在网络的要求，检查完毕后尝试重新认证

    早上一起床,登陆锐捷客户端上网,谁知道错问题了.不能联网了,锐捷登陆成功,但是一会儿就提示失败,获取IP信息失败了.下面我描述一下问题原因: 锐捷登陆后有认证提示,和往常正常情况一样的,不过有个小感叹 ...

  5. JAVA多线程下载网络文件

    JAVA多线程下载网络文件,开启多个线程,同时下载网络文件.   源码如下:(点击下载 MultiThreadDownload.java) import java.io.InputStream; im ...

  6. 正则表达式验证工具类RegexUtils.java

    Java 表单注册常用正则表达式验证工具类,常用正则表达式大集合. 1. 电话号码 2. 邮编 3. QQ 4. E-mail 5. 手机号码 6. URL 7. 是否为数字 8. 是否为中文 9. ...

  7. Eclipse 下如何引用另一个项目的资源文件

    为什么要这么做?可参考:Eclipse 下如何引用另一个项目的Java文件 下面直接说下步骤:(项目A 引用 项目B的资源文件) 1.右键 项目A,点击菜单 Properties 2.在弹出的框中,点 ...

  8. poj-3176 Cow Bowling &&poj-1163 The Triangle && hihocoder #1037 : 数字三角形 （基础dp）

    经典的数塔模型. 动态转移方程:  dp[i][j]=max(dp[i+1][j],dp[i+1][j+1])+p[i][j]; #include <iostream> #include ...

  9. base64加密和解密

    http://snailwarrior.blog.51cto.com/680306/142472/ 2.从标准输入读取文件内容,base64编码并打印到标准输出 [root@localhost tes ...

  10. PDO（PHP Data Object），Mysqli，以及对sql注入等问题的解决

    这篇是上一篇 http://www.cnblogs.com/charlesblc/p/5987951.html 的续集. 看有的文章提到mysqli和PDO都支持多重查询,所以下面的url会造成表数据 ...