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


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页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
js Event对象的5种坐标
Sep 12 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
JS去除右边逗号的简单方法
Jul 03 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
js回溯法计算最佳旅行线路代码实例
Sep 11 Javascript
vue项目出现页面空白的解决方案
Oct 31 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
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
PHP 命令行参数详解及应用
2011/05/18 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
Vue+webpack项目基础配置教程
2018/02/12 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
在Django框架中编写Context处理器的方法
2015/07/20 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
Python3并发写文件与Python对比
2019/11/20 Python
Python 文件数据读写的具体实现
2020/01/24 Python
Python如何重新加载模块
2020/07/29 Python
Python grpc超时机制代码示例
2020/09/14 Python
Python识别处理照片中的条形码
2020/11/16 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
酒店管理自荐信
2013/10/23 职场文书
高校十八大报告感想
2014/01/27 职场文书
运动会稿件100字
2014/02/21 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
创建文明学校实施方案
2014/03/11 职场文书
承诺书的格式范文
2014/03/28 职场文书
实习生评语
2014/04/26 职场文书
《悯农》教学反思
2014/04/28 职场文书
离婚财产处理协议书
2014/09/30 职场文书
2015年路政工作总结
2015/05/22 职场文书
喋血孤城观后感
2015/06/08 职场文书
消防宣传标语大全
2015/08/03 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python