编程 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 相关文章推荐

使用dynatrace-ajax跟踪JavaScript的性能

Apr 12 Javascript

了解一点js的Eval函数

Jul 26 Javascript

jquery实现弹出div,始终显示在屏幕正中间的简单实例

Mar 08 Javascript

JavaScript实现的购物车效果可以运用在好多地方

May 09 Javascript

JQuery中ajax方法访问web服务实例

Jul 18 Javascript

jQuery 监控键盘一段时间没输入

Apr 22 Javascript

Javascript oop设计模式面向对象编程简单实例介绍

Dec 13 Javascript

使用JS在浏览器中判断当前网络连接状态的几种方法

May 05 Javascript

Node接收电子邮件的实例代码

Jul 21 Javascript

Vee-Validate的使用方法详解

Sep 22 Javascript

详解webpack编译多页面vue项目的配置问题

Dec 11 Javascript

vue router 配置路由的方法

Jul 26 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&MYSQL分页原理及实现

2007/01/02 PHP

php empty函数使用说明

2009/08/10 PHP

PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)

2013/07/02 PHP

Yii框架实现图片上传的方法详解

2017/05/20 PHP

php nginx 实时输出的简单实现方法

2018/01/21 PHP

Laravel 5.4.36中session没有保存成功问题的解决

2018/02/19 PHP

laravel中Redis队列监听中断的分析

2020/09/14 PHP

JS DOM 操作实现代码

2010/08/01 Javascript

用jQuery获取IE9下拉框默认值问题探讨

2013/07/22 Javascript

Js+Jq获取URL参数的集中方法示例代码

2014/05/20 Javascript

jquery实现先淡出再折叠收起的动画效果

2015/08/07 Javascript

基于JavaScript实现图片点击弹出窗口而不是保存

2016/02/06 Javascript

jQuery 中的 DOM 操作

2016/04/26 Javascript

JS实现环形进度条（从0到100%）效果

2016/07/05 Javascript

微信小程序实现图片自适应(支持多图)

2017/01/25 Javascript

jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)

2017/05/20 jQuery

利用babel将es6语法转es5的简单示例

2017/12/01 Javascript

Vue.js 实现微信公众号菜单编辑器功能(二)

2018/05/08 Javascript

微信小程序实现即时通信聊天功能的实例代码

2018/08/17 Javascript

详解html-webpack-plugin插件(用法总结)

2018/09/12 Javascript

详解Vue2.0组件的继承与扩展

2018/11/23 Javascript

用Vue编写抽象组件的方法

2019/05/06 Javascript

基于layui的下拉列表的数据回显方法

2019/09/24 Javascript

在vue中把含有html标签转为html渲染页面的实例

2019/10/28 Javascript

在vue中使用Echarts画曲线图的示例

2020/10/03 Javascript

Python使用PyGreSQL操作PostgreSQL数据库教程

2014/07/30 Python

老生常谈Python进阶之装饰器

2017/05/11 Python

python 实现在txt指定行追加文本的方法

2018/04/29 Python

django ManyToManyField多对多关系的实例详解

2019/08/09 Python

Python数据可视化 pyecharts实现各种统计图表过程详解

2019/08/15 Python

对tensorflow中的strides参数使用详解

2020/01/04 Python

keras中的History对象用法

2020/06/19 Python

意大利制造的西装、衬衫和针对男士量身定制的服装：Lanieri

2018/04/08 全球购物

青蓝工程实施方案

2014/03/27 职场文书

《夜莺的歌声》教学反思

2016/02/22 职场文书

SpringBoot系列之MongoDB Aggregations用法详解

2022/02/12 MongoDB