js实现图片轮换效果代码


Posted in Javascript onApril 16, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script type="text/javascript"> 
var numb = 0; 
var imgnumb = 1; 
function showimg() { 
//两张图片切换方法1 /*numb++; 
if (numb % 2 == 0) { 
document.getElementById('img1').setAttribute('src', 'images/1.jpg'); 
} 
else { 
document.getElementById('img1').setAttribute('src', 'images/2.jpg'); 
}*/ 
//两张图片切换方法2 /*if (numb == 0) { 
document.getElementById('img1').setAttribute('src', 'images/2.jpg'); 
numb = 1; 
} 
else { 
document.getElementById('img1').setAttribute('src', 'images/1.jpg'); 
numb = 0; 
}*/ 
} 
/图片轮换/多张 function imgfor() { 
imgnumb++; 
document.getElementById('img1').setAttribute('src', 'images/' + imgnumb + '.jpg'); 
if (imgnumb == 9) { 
imgnumb = 0; 
} 
} 
var clearid; 
function clearfun() { 
clearInterval(clearid); 
} 
clearid=setInterval(imgfor, 1000); 
</script> 
</head> 
<body> 
<img alt="" id="img1" class="style1" src="images/1.jpg" width="500px" height="500px" /> 
<input type="button" value="两张图片切换" onclick="showimg();" /> 
<br /> 
<input type="button" value="多张图片轮换" onclick="imgfor();;" /> 
<br /> 
<input type="button" value="结束执行" onclick="clearfun();" /> 
</body> 
</html>
Javascript 相关文章推荐
关于hashchangebroker和statehashable的补充文档
Aug 08 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
javascript完美实现给定日期返回上月日期的方法
Jun 15 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
vue组件父子间通信详解(三)
Nov 07 Javascript
基于vue展开收起动画的示例代码
Jul 05 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 Javascript
原生JavaScript实现轮播图
Jan 10 Javascript
vue 实现上传组件
May 31 Vue.js
js相册效果代码(点击创建即可)
Apr 16 #Javascript
jQuery实现点击标题输入详细信息
Apr 16 #Javascript
jQuery图片的展开和收缩实现代码
Apr 16 #Javascript
js变换显示图片的实例
Apr 16 #Javascript
在jQuery中 常用的选择器介绍
Apr 16 #Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 #Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 #Javascript
You might like
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
JQuery toggle使用分析
2009/11/16 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
Node.js编码规范
2014/07/14 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
2018/04/23 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
在python里面运用多继承方法详解
2019/07/01 Python
Python 的AES加密与解密实现
2019/07/09 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
专题组织生活会发言材料
2014/10/17 职场文书
教师节座谈会主持词
2015/07/03 职场文书
早上好问候语大全
2015/11/10 职场文书
银行柜员工作心得体会
2016/01/23 职场文书