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


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 相关文章推荐
javascript引导程序
Oct 26 Javascript
js给onclick事件赋值,动态传参数实例解说
Mar 28 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
详解JavaScript对象类型
Jun 16 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
js实现一键复制功能
Mar 16 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 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发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
JQuery从头学起第三讲
2010/07/06 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
Bootstrap插件全集
2016/07/18 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
Python3搜索及替换文件中文本的方法
2015/05/22 Python
用python写的一个wordpress的采集程序
2016/02/27 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
Python实现二维数组输出为图片
2018/04/03 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
网上书店创业计划书
2014/01/12 职场文书
员工入职担保书范文
2014/04/01 职场文书
公司出纳岗位职责
2015/03/31 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
公司酒会致辞
2015/07/30 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
基于Go语言构建RESTful API服务
2021/07/25 Golang