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 国际象棋棋盘 实现代码
Jun 26 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 25 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
js实现黑白div块画空心的图形
Dec 13 Javascript
vue接口请求加密实例
Aug 11 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 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源代码
2009/08/21 PHP
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
PHP代码优化的53个细节
2014/03/03 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
js css后面所带参数含义介绍
2013/08/18 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
Python学习入门之区块链详解
2017/07/25 Python
python仿抖音表白神器
2019/04/08 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
python实现键盘输入的实操方法
2019/07/16 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
竞选演讲稿范文
2013/12/28 职场文书
化妆品店促销方案
2014/02/24 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL