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 相关文章推荐
用js判断用户浏览器是否是XP SP2的IE6
Mar 08 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
jquery使整个div区域可以点击的方法
Jun 24 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 Javascript
js实现动态显示时间效果
Mar 06 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
js中的数组对象排序分析
Dec 11 Javascript
微信小程序开发技巧汇总
Jul 15 Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
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
在Zeus Web Server中安装PHP语言支持
2006/10/09 PHP
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
php文件操作相关类实例
2015/06/18 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
学习ExtJS TextField常用方法
2009/10/07 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
pyside写ui界面入门示例
2014/01/22 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
巴基斯坦购物网站:Goto
2019/03/11 全球购物
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
综合内勤岗位职责
2014/04/14 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
个人委托书怎么写
2014/09/17 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
2015年招聘工作总结
2014/12/12 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
初三语文教学反思
2016/03/03 职场文书
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android