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


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拖放插件集合
Apr 09 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 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
日本收入最高的漫画家:海贼王作者版税年收入高达8.45亿元
2020/03/04 日漫
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
PHP4.04简明安装
2006/10/09 PHP
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
php 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
PHP return语句的另一个作用
2014/07/30 PHP
javascript 哈希表(hashtable)的简单实现
2010/01/20 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
原生JS实现的轮播图功能详解
2018/08/06 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
python实现发送邮件功能
2017/07/22 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
pandas通过索引进行排序的示例
2018/11/16 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
python模拟实现分发扑克牌
2020/04/22 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
利用python 下载bilibili视频
2020/11/13 Python
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
病假条格式范文
2015/08/17 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL
解决 redis 无法远程连接
2022/05/15 Redis