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 removeChild 使用注意事项
Apr 11 Javascript
js 创建书签小工具之理论
Feb 25 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
js简易namespace管理器 实例代码
Jun 21 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
JavaScript的Module模式编程深入分析
Aug 13 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
详解VueJs前后端分离跨域问题
May 24 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 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 Curl出现403错误的解决办法
2014/05/29 PHP
IE下js调试工具Companion.JS
2010/10/15 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
js对象的复制继承实例
2015/01/10 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
js new Date()实例测试
2019/10/31 Javascript
python+pyqt实现12306图片验证效果
2017/10/25 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
python解析含有重复key的json方法
2019/01/22 Python
python写入文件自动换行问题的方法
2019/07/05 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
人事主管岗位职责
2014/01/30 职场文书
竞选部长演讲稿
2014/04/26 职场文书
植树节活动总结
2014/04/30 职场文书
个人查摆剖析材料
2014/10/16 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
2014年法务工作总结
2014/12/11 职场文书
搬迁通知
2015/04/20 职场文书
教导处教学工作总结
2015/08/12 职场文书
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电