JavaScript对象(document对象 图片轮播)
2016-01-09 20:38
621 查看
图片轮播:
需要注意的HTML需要img标签,他和input标签一样,是非封闭的标签
JavaScript:
现在只需要改变JavaScript中数组元素的值即可改变图片
需要注意的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="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);
相关文章推荐
- JSP复习----html部分
- Json解析小案例
- javascript类型系统之String
- javascript类型系统之Array
- 学习JS的这些日子——十二月总结
- JS特效文字逐个显示
- js跳转
- htmlunit+Jsoup实现网页抓取
- 遇到过的好用的js框架
- 那些年遇到的js bug
- 详解javascript事件冒泡
- XML文件的解析和json的解析
- JSP+Servlert中的Filter详解
- js父页面中使用子页面的方法
- 实例讲解js验证表单项是否为空的方法
- js文章收藏
- javascript跑马灯抽奖实例讲解
- javascript返回顶部的按钮实现方法
- javascript 定义修改属性值
- js毫秒级时间戳转换Demo