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与Prototype并存的冲突的解决方法
Aug 29 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
vue.js动态数据绑定学习笔记
May 19 Javascript
JS中min函数实例讲解
Feb 18 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 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
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
多个PHP中文字符串截取函数
2013/11/12 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
python实现人人网登录示例分享
2014/01/19 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
python 实现屏幕录制示例
2019/12/23 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
人事档案接收函
2014/01/12 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
庆七一晚会主持词
2015/06/30 职场文书
MySQL8.0的WITH查询详情
2021/08/30 MySQL
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android