JavaScript对象(document对象 图片轮播)
图片轮播:
需要注意的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对象 图片轮播)的更多相关文章
- 使用javascript,jquery实现的图片轮播功能
使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...
- Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- 超实用的JavaScript代码段 Item3 --图片轮播效果
图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...
- JavaScript学习---简易图片轮播
效果如下: 图片定时轮播 点击左右控制显示下一张或上一张图片 index.html文件 <html> <head> <title> js编写实现幻灯片效果 < ...
- 纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...
- javaScript 手写图片轮播
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Javascript图片轮播
原文链接:http://www.imooc.com/article/7393 编辑HTML代码: <div id="wrap"><!--图片展示区--> & ...
- javascript 实现图片轮播和点击切换功能
图片轮播是网页上一个比较常见的功能,下面我们来实现他吧 原理很简单: 1:固定的区域,所有的图片重叠,一次只能显示一张图片 2:通过改变图片的zIndex属性改变显示的图片,就可以达到切换的效果了 & ...
- JavaScript图片轮播,举一反三
图片轮播,在一些购物网站上运用的不胜枚举,下面简单介绍一下图片轮播的实现. 如图 <!doctype html> <html lang="en"> < ...
随机推荐
- linux命令(4):ps命令
Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态的显示进程信 ...
- CentOS中的chkconfig命令
chkconfig: chkconfig命令主要用来更新(启动或停止)和查询系统服务的运行级信息.谨记chkconfig不是立即自动禁止或激活一个服务,它只是简单的改变了符号连接.语法: ...
- 【资料分享】 OpenCV精华收藏
OpenCV精华收藏 SkySeraph Dec.29th 2010 HQU Email:zgzhaobo@gmail.com QQ:452728574 Latest Modified Dat ...
- A - 畅通工程
A - 畅通工程 Time Limit:2000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Sta ...
- BZOJ 2351 Matrix(哈希)
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2351 题意:给出一个n*m的01矩阵.再给出10个A*B的小01矩阵.判断这些小的矩阵是 ...
- Asp.net中的HttpModule和HttpHandler的简单用法
在Asp.net中,HttpModule和HttpHandler均可以截取IIS消息进行处理,这使得我们制作人员能够非常方便的进行诸如图片水印添加,图片盗链检查等功能. 下面先就HttpModule的 ...
- [Swift 语法点滴]——数组参数
Swift语言一如既往的继承了苹果公司卓尔不群的奇葩思维方式,总是要弄得跟别的语言不一样,才能显出它的特殊 比如用数组作为参数上,这格式实在是没有试出来,找了stackoverflow,才找到相应信息 ...
- .net remoting 客户端与服务端绑定事件,一部电脑当服务器,另一部当客户端,发布后没法接收远程错误信息。
可以是用下面代码抛出远程错误,客户端和服务端都要设置,因为服务端事件回调时角色变成了远程客户端了. RemotingConfiguration.CustomErrorsMode = CustomErr ...
- Sublime 的中文乱码问题
Sublime Text 是现在最受欢迎的文本编辑器,没有之一.它非常简洁,而且对各种代码的高亮显示很美观.但是,它默认不支持 GBK.Shift-JIS 等中文.日本编码格式,故打开此类文件会出现乱 ...
- python练习程序(c100经典例10)
题目: 打印楼梯,同时在楼梯上方打印两个笑脸. print '..' for i in range(1,9): print '**' for j in range(1,i+1): print ' ',