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


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前台数据获取实现代码
Mar 16 Javascript
图片Slider 带左右按钮的js示例
Aug 30 Javascript
浅析JavaScript中的typeof运算符
Nov 30 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
vue设置一开始进入的页面教程
Oct 28 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 Javascript
vue使用element-ui按需引入
May 20 Vue.js
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
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
基于PHP静态类的原罪详解
2013/05/06 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
layui分页效果实现代码
2017/05/19 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
jquery实现图片放大镜效果
2020/12/23 jQuery
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
代码详解django中数据库设置
2019/01/28 Python
python多线程并发实例及其优化
2019/06/27 Python
浅析Django中关于session的使用
2019/12/30 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
创业计划书中包含的9个方面
2013/12/26 职场文书
《莫高窟》教学反思
2014/02/25 职场文书
公休请假条
2014/04/11 职场文书
国际贸易系求职信
2014/08/09 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
HTML中的表格元素介绍
2022/02/28 HTML / CSS