查看图片(前进后退)功能实现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 相关文章推荐
有趣的javascript数组定义方法
Sep 10 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
微信小程序表单弹窗实例
Jul 19 Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 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 作用域解析运算符(::)
2010/07/27 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
python 删除非空文件夹的实例
2018/04/26 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
python 内置函数汇总详解
2019/09/16 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
Django使用rest_framework写出API
2020/05/21 Python
体育教育毕业生自荐信
2013/11/21 职场文书
后勤人员岗位职责
2013/12/17 职场文书
高中生毕业自我鉴定范文
2013/12/22 职场文书
海南地接欢迎词
2014/01/14 职场文书
《狐假虎威》教学反思
2014/02/07 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
2016新年慰问信范文
2015/03/25 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
本科毕业答辩开场白
2015/05/27 职场文书
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers