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获取表单名称(name)的方法
Apr 02 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
微信小程序实现刷脸登录
May 25 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 Javascript
JavaScript实现简单随机点名器
Nov 21 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-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
javascript 命名规则 变量命名规则
2010/02/25 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
python 正则式 概述及常用字符
2009/05/07 Python
python中map()与zip()操作方法
2016/02/27 Python
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
咖啡店自主创业商业计划书
2014/01/22 职场文书
倡议书范文
2014/04/16 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
2015年读书月活动总结
2015/03/26 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
Python提取PDF指定内容并生成新文件
2021/06/09 Python