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 相关文章推荐
用javascript实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
JS时间选择器 兼容IE6,7,8,9
Jun 26 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
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
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
php单例模式的简单实现方法
2016/06/10 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
详解Node.js异步处理的各种写法
2019/06/09 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
简单介绍Python中的floor()方法
2015/05/15 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
python绘制随机网络图形示例
2019/11/21 Python
Python 合并拼接字符串的方法
2020/07/28 Python
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
毕业寄语大全
2014/04/09 职场文书
大型营销活动计划书
2014/04/28 职场文书
天猫活动策划方案
2014/08/21 职场文书
就业意向协议书
2015/01/29 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
python中tkinter复选框使用操作
2021/11/11 Python