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 相关文章推荐
用jquery实现下拉菜单效果的代码
Jul 25 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
JavaScript中的slice()方法使用详解
Jun 06 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
微信小程序的部署方法步骤
Sep 04 Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
Aug 19 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
安装APACHE
2007/01/15 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
Javascript 面向对象特性
2009/12/28 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
node.js基础知识小结
2018/02/26 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
Python格式化压缩后的JS文件的方法
2015/03/05 Python
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
Python制作简易注册登录系统
2016/12/15 Python
django框架如何集成celery进行开发
2017/05/24 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
python for循环remove同一个list过程解析
2019/08/14 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
广告公司文案策划岗位职责
2015/04/14 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
MySQL 不等于的三种使用及区别
2021/06/03 MySQL
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL