查看图片(前进后退)功能实现js代码


Posted in Javascript onApril 24, 2013

注:images文件夹下图片的命名是从1~5.jpg有规律的
声明的 var array = [1, 2, 3, 4, 5]; 这个数组存放的是图片的名称

<head> 
<title></title> 
<script src="Jquery1.7.js" type="text/javascript"></script> 
<style type="text/css"> 
img 
{ 
width: 200px; 
height: 200px; 
} 
</style> 
<script type="text/javascript"> 
$(function () { 
var array = [1, 2, 3, 4, 5]; 
var count = 0; 
$('#Button1').click(function () { 
if (count > 0) { 
count--; 
$('img').attr('src','images/'+array[count]+'.jpg'); 
} 
}) 
$('#Button2').click(function () { 
if (count <4) { 
count++; 
$('img').attr('src', 'images/' + array[count] + '.jpg'); 
} 
}) 
}) 
</script> 
</head> 
<body> 
<table> 
<tr> 
<td> 
<input id="Button1" type="button" value="<" /> 
</td> 
<td> 
<img src="images/1.jpg" /> 
</td> 
<td> 
<input id="Button2" type="button" value=">" /> 
</td> 
</tr> 
</table> 
</body>

<!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> 
<style type="text/css"> 
#mydiv 
{ 
position: absolute; 
width: 500px; 
height: 400px; 
top: 50%; 
left: 50%; 
margin-top: -200px; 
margin-left: -290px; 
} 
img 
{ 
width: 480px; 
height: 380px; 
} 
</style> 
<script src="Jquery1.7.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
//第一种方法 
/* 
$('#btn1').toggle(function () { $('img').attr('src', 'images/1.jpg'); }, 
function () { $('img').attr('src', 'images/2.jpg'); }, 
function () { $('img').attr('src', 'images/3.jpg'); }, 
function () { $('img').attr('src', 'images/4.jpg'); }, 
function () { $('img').attr('src', 'images/5.jpg'); }); $('#btn2').toggle(function () { $('img').attr('src', 'images/5.jpg'); }, 
function () { $('img').attr('src', 'images/4.jpg'); }, 
function () { $('img').attr('src', 'images/3.jpg'); }, 
function () { $('img').attr('src', 'images/2.jpg'); }, 
function () { $('img').attr('src', 'images/1.jpg'); }); 
*/ 
//第二种方法 
var array = [1, 2, 3, 4, 5, 6]; 
var count = 0; 
//后退 
$('#btn1').click(function () { 
if (count > 0) { 
count--; 
$('img').attr('src', 'images/' + array[count] + '.jpg'); 
} 
}) 
//前进 
$('#btn2').click(function () { 
if (count < 5) { 
count++; 
$('img').attr('src', 'images/' + array[count] + '.jpg'); 
} 
}) 
}) 
</script> 
</head> 
<body> 
<div id="mydiv"> 
<table> 
<tr> 
<td> 
<input id="btn1" type="button" value="<" /> 
</td> 
<td> 
<img src="images/1.jpg" /> 
</td> 
<td> 
<input id="btn2" type="button" value=">" /> 
</td> 
</tr> 
</table> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
异步javascript的原理和实现技巧介绍
Nov 08 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
javascript实现继承的简单实例
Jul 26 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
uni app仿微信顶部导航条功能
Sep 17 Javascript
vue中用 async/await 来处理异步操作
Jul 18 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 Javascript
微信小程序实现录音Record功能
May 09 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 #Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 #Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 #Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 #Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 #Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
Apr 24 #Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 #Javascript
You might like
PHP Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
jquery 常用操作方法
2010/01/28 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
js控制frameSet示例
2013/09/10 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
js继承实现方法详解
2016/12/16 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
详解Python中内置的NotImplemented类型的用法
2015/03/31 Python
Python Matplotlib库入门指南
2015/05/18 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
Python星号*与**用法分析
2018/02/02 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
python实现一个简单RPC框架的示例
2020/10/28 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
建党伟业电影观后感
2015/06/01 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript