图片轮播：

需要注意的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. 基于Theano的DNN框架Blocks使用简要总结

    Blocks官方代码地址:https://github.com/mila-udem/blocks Blocks是加拿大Montreal大学Bengio实验室牵头开发的基于Python的神经网络模型框架 ...

  2. EasyUi datagrid 表格分页例子

    1.首先引入 easyui的 css 和 js 文件 2.前台 需要写的js //源数据 function Async(action,args,callback){  $.ajax({  url: a ...

  3. spring3定时器简单配置

    最近在做oa项目中写到一个功能,就是员工每天的签到和签退.当时想了很久都没有想出来,后来自己上网查了一下spring的定时器,然后就有了思路. 下面我贴上自己用到的这个定时器的配置.希望能够和大家一起 ...

  4. android:descendantFocusability的作用：viewgroup与其上面view的焦点控制，如何让子view失去焦点等。

    ViewGroup的下面这个属性可以控制. 原文: android:descendantFocusability Defines the relationship between the ViewGr ...

  5. 第四篇 在中国做ERP系统实施你必须知道的一些常识

    1. ERP实施要特别从参与全球竞争的视角指引系统建设.中国社会经历了一个从计划经济体制到市场经济体制的转变.中国加入WTO后,要与国际接轨,要按照世界贸易组织有关的贸易规则开展国际贸易.中国的关税与 ...

  6. plsql programming 16 动态SQL和动态PLSQL

    动态SQL 是指在执行时才构建 SQL 语句, 相对于静态 sql 的编译时就已经构建. 动态PLSQL 是指整个PL/SQL代码块都是动态构建, 然后再编译执行的. 作用: 1. 可以支持 DDL ...

  7. android开发找不到模拟器（PANIC: Could not open:）解决办法

    android开发找不到模拟器(PANIC: Could not open:)解决办法   2013/4/3 17:44:15 0人评论 213次浏览 分类:android开发 在系统环境变量设置名为 ...

  8. Uploadify上传Excel到数据库

    前两章简单的介绍了Uploadify上传插件的基本使用和相关的属性说明.这一章结合Uploadify+ssh框架+jquery实现Excel上传并保存到数据库.         以前写的这篇文章 Jq ...

  9. java MVC设计模式

    MVC(Model View Control)模型-视图-控制器 一.MVC与模板概念的理解 MVC本来是存在于Desktop程序中的,M是指数据模型,V是指用户界面,C则是控制器.使用MVC的目的是 ...

  10. [Swift系列]002-基础语法

    基础语法就那老几样,很快可以说完 [常量.变量] 1.变量用 var,系统自动去判断类型,但变量再次赋值需保持数据类型一致 var  a=50 相信用过js/java/C#的,对这个var都不陌生 使 ...