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


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 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
使用AOP改善javascript代码
May 01 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
JS实现换肤功能的方法实例详解
Jan 30 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
jQuery实现雪花飘落效果
Aug 02 jQuery
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实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
javascript回到顶部特效
2016/07/30 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
2019/01/20 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
实例说明Python中比较运算符的使用
2015/05/13 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
Python实现求数列和的方法示例
2018/01/12 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
销售员自我评价怎么写
2013/09/19 职场文书
专科毕业生就业推荐信
2013/11/01 职场文书
客服主管岗位职责
2013/12/13 职场文书
八一演出活动方案
2014/02/03 职场文书
趣味游戏活动方案
2014/02/07 职场文书
团日活动总结书格式
2014/05/08 职场文书
学校三节实施方案
2014/06/09 职场文书
毕业生工作求职信
2014/06/30 职场文书
树转促学习心得体会
2014/09/10 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
初中语文教学反思范文
2016/03/03 职场文书
python flask开发的简单基金查询工具
2021/06/02 Python
解决mysql的int型主键自增问题
2021/07/15 MySQL