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


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 相关文章推荐
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 Javascript
jQuery中addClass()方法用法实例
Jan 05 Javascript
Javascript中的几种URL编码方法比较
Jan 23 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
Jul 12 Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 Javascript
node.js +mongdb实现登录功能
Jun 18 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下通过file_get_contents的代理使用方法
2011/02/16 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
Python3实现购物车功能
2018/04/18 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
python tkinter组件摆放方式详解
2019/09/16 Python
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
请假条标准格式规范
2014/04/10 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
作风转变心得体会
2014/09/02 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
小学教学工作总结2015
2015/05/13 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
pandas提升计算效率的一些方法汇总
2021/05/30 Python
ipad隐藏软件app图标方法
2022/04/19 数码科技
Mysql 文件配置解析介绍
2022/05/06 MySQL