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第一课
Feb 27 Javascript
js操作select控件的几种方法
Jun 02 Javascript
javascript 事件绑定问题
Jan 01 Javascript
jQuery提交表单ajax查询实例代码
Oct 07 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 Javascript
vue移动端使用canvas签名的实现
Jan 15 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
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
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
PHP查看SSL证书信息的方法
2016/09/22 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
phpwind放自动注册方法
2006/12/02 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
Python图算法实例分析
2016/08/13 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
详解Python打包分发工具setuptools
2019/08/05 Python
Python进程池Pool应用实例分析
2019/11/27 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
新娘父亲婚礼致辞
2014/01/16 职场文书
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫
bose降噪耳机音能消除人声吗
2022/04/19 数码科技
python​格式化字符串
2022/04/20 Python