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 构建客户/服务分离的链接模型中Table分页代码效率初探
Jan 22 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
JS中超越现实的匿名函数用法实例分析
Jun 21 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 Javascript
微信小程序工具函数封装
Oct 28 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 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
ip签名探针
2006/10/09 PHP
PHP入门学习笔记之一
2010/10/12 PHP
php简单定时执行任务的实现方法
2015/02/23 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
layer弹出层显示在top顶层的方法
2019/09/11 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
Python中文竖排显示的方法
2015/07/28 Python
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
利用Python实现kNN算法的代码
2019/08/16 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
HTML5标签使用方法详解
2015/11/27 HTML / CSS
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
拖鞋店创业计划书
2014/01/15 职场文书
买房子个人收入证明
2014/01/16 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
销售提升方案
2014/06/07 职场文书
创先争优活动心得体会
2014/09/04 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
python实现局部图像放大
2021/11/17 Python
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android