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


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 相关文章推荐
js 鼠标点击事件及其它捕获
Jun 04 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
javascript实现2016新年版日历
Jan 25 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
小程序实现投票进度条
Nov 20 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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
基于mysql的bbs设计(四)
2006/10/09 PHP
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
javascript基础知识讲解
2017/01/11 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
python 基础教程之Map使用方法
2017/01/17 Python
python执行精确的小数计算方法
2019/01/21 Python
python文字转语音实现过程解析
2019/11/12 Python
django使用xadmin的全局配置详解
2019/11/15 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
小区消防演习方案
2014/02/21 职场文书
《秋姑娘的信》教学反思
2014/02/28 职场文书
国窖1573广告词
2014/03/21 职场文书
春节超市活动方案
2014/08/14 职场文书
4s店活动策划方案
2014/08/25 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS