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里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
js中for in的用法示例解析
Dec 25 Javascript
innerHTML在IE中报错解决方案
Dec 15 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
微信小程序实现左侧滑动导航栏
Apr 08 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
joomla内置的表单验证功能使用方法
2010/06/11 PHP
Look And Say 序列php实现代码
2011/05/22 PHP
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
Python字符串的常见操作实例小结
2019/04/08 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
学术诚信承诺书
2014/05/26 职场文书
后勤个人工作总结
2015/02/28 职场文书
银行自荐信范文
2015/03/25 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
《给予树》教学反思
2016/03/03 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python