编程 Javascript

图片轮换效果实现代码(点击按钮停止执行)

Posted in Javascript onApril 12, 2013

在这个小程序中，需要把images文件夹下图片的命名设置为有顺序的，1、2、3……

<script type="text/javascript"> 
var imgnumb = 1; 
function imgfor() { 
imgnumb++; 
document.getElementById('img1').setAttribute('src', 'images/' + imgnumb + '.jpg'); 
if (imgnumb == 5) { //共5张图片 
imgnumb = 0; 
} 
} 
var clearid; 
function clearfun() { 
clearInterval(clearid); 
} 
clearid=setInterval(imgfor, 500); 
</script> 
</head> 
<body> 
<img alt="" id="img1" class="style1" src="images/1.jpg" width="500px" height="500px" /> 
<input type="button" value="结束执行" onclick="clearfun();" /> 
</body> 
var imgnumb = 1; 
function imgfor() { 
imgnumb++; 
document.getElementById('img1').setAttribute('src', 'images/' + imgnumb + '.jpg'); 
if (imgnumb == 5) { 
imgnumb = 0; 
} 
} 
var clearid; 
function clearfun() { 
clearInterval(clearid); 
} 
clearid=setInterval(imgfor, 500); 
</script> 
</head> 
<body> 
<img alt="" id="img1" class="style1" src="images/1.jpg" width="500px" height="500px" /> 
<input type="button" value="结束执行" onclick="clearfun();" /> 
</body>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

疯狂Jquery第一天(Jquery学习笔记)

May 11 Javascript

重写javascript中window.confirm的行为

Oct 21 Javascript

在js文件中如何获取basePath处理js路径问题

Jul 10 Javascript

Node.js抓取中文网页乱码问题和解决方法

Feb 10 Javascript

jQuery实现点击小图显示大图代码分享

Aug 25 Javascript

jQuery打字效果实现方法(附demo源码下载)

Dec 18 Javascript

javascript实现查找数组中最大值方法汇总

Feb 13 Javascript

JS处理数据四舍五入(tofixed与round的区别详解)

Oct 26 Javascript

微信小程序 input输入及动态设置按钮的实现

Oct 27 Javascript

微信小程序通过保存图片分享到朋友圈功能

May 24 Javascript

基于React+Redux的SSR实现方法

Jul 03 Javascript

JavaScript折半查找（二分查找）算法原理与实现方法示例

Aug 06 Javascript

Javascript的时间戳和php的时间戳转换注意事项

Apr 12 #Javascript

有关javascript的性能优化 (repaint和reflow)

Apr 12 #Javascript

引用外部js乱码问题分析及解决方案

Apr 12 #Javascript

关于query Javascript CSS Selector engine

Apr 12 #Javascript

使用jQuery清空file文件域的解决方案

Apr 12 #Javascript

原生js实现查找/添加/删除/指定元素的class

Apr 12 #Javascript

jQuery contains过滤器实现精确匹配使用方法

Apr 12 #Javascript

You might like

一些php技巧与注意事项分析

2011/02/03 PHP

PHP中strlen()和mb_strlen()的区别浅析

2014/06/19 PHP

关于php中的json_encode()和json_decode()函数的一些说明

2016/11/20 PHP

php 删除指定文件夹的实例讲解

2017/07/25 PHP

JavaScript判断两种格式的输入日期的正确性的代码

2007/03/25 Javascript

javascript之dhDataGrid Ver2.0.0代码

2007/07/01 Javascript

学习ExtJS 访问容器对象

2009/10/07 Javascript

基于jQuery实现表格数据的动态添加与统计的代码

2011/01/31 Javascript

jQuery替换字符串(实例代码)

2013/11/13 Javascript

JS冒泡事件的快速解决方法

2013/12/16 Javascript

javascript实现的左右无缝滚动效果

2016/09/19 Javascript

详解JavaScript权威指南之对象

2016/09/27 Javascript

学习vue.js表单控件绑定操作

2016/12/05 Javascript

IntersectionObserver API 详解篇

2016/12/11 Javascript

JavaScript评论点赞功能的实现方法

2017/03/13 Javascript

使用OPENLAYERS3实现点选的方法

2020/09/24 Javascript

vue添加axios,并且指定baseurl的方法

2018/09/19 Javascript

详解如何在vue项目中使用lodop打印插件

2018/09/27 Javascript

JavaScript中的回调函数实例讲解

2019/01/27 Javascript

Vue的data、computed、watch源码浅谈

2020/04/04 Javascript

微信小程序 button样式设置为图片的方法

2020/06/19 Javascript

[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19

2020/12/24 DOTA

python使用wmi模块获取windows下的系统信息监控系统

2015/10/27 Python

Python实现爬取马云的微博功能示例

2019/02/16 Python

python3.x+pyqt5实现主窗口状态栏里（嵌入）显示进度条功能

2019/07/04 Python

pytorch 网络参数 weight bias 初始化详解

2020/06/24 Python

Python 如何实现访问者模式

2020/07/28 Python

HTML5 LocalStorage 本地存储详细概括（多图）

2017/08/18 HTML / CSS

Joules美国官网：出色的英国风格

2017/10/30 全球购物

幼儿园保教管理制度

2014/02/03 职场文书

《第一朵杏花》教学反思

2014/04/16 职场文书

竞选学习委员演讲稿

2014/04/28 职场文书

本科生导师推荐信范文

2014/05/18 职场文书

光学与应用专业毕业生求职信

2014/09/01 职场文书

张家口市高新区党工委群众路线教育实践活动整改方案

2014/10/25 职场文书

教你漂亮打印Pandas DataFrames和Series

2021/05/29 Python