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+绝对定位的实现
May 08 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
Apr 13 Javascript
简单实现js上传文件功能
Aug 21 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
js+css实现全屏侧边栏
Jun 16 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
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
关于PHP语言构造器介绍
2013/07/08 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
js资料toString 方法
2007/03/13 Javascript
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
jQuery中Form相关知识汇总
2015/01/06 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
Node.js websocket使用socket.io库实现实时聊天室
2017/02/20 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
js实现计算器功能
2020/08/10 Javascript
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
python属于跨平台语言码
2020/06/09 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
校园餐饮创业计划书
2014/01/10 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
优秀语文教师事迹
2014/05/18 职场文书
市场营销计划书
2015/01/17 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python
只用Python就可以制作的简单词云
2021/06/07 Python
Python字典的基础操作
2021/11/01 Python