编程 Javascript

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

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