查看图片(前进后退)功能实现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 相关文章推荐
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
js实现水平滚动菜单导航
Jul 21 Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
原生js滑动轮播封装
Jul 31 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 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
PHP5常用函数列表(分享)
2013/06/07 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
关于IE BUG与字符串截取substr的解决办法
2013/04/10 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
iview同时验证多个表单问题总结
2018/09/29 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
python3 模拟登录v2ex实例讲解
2017/07/13 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
flask 实现token机制的示例代码
2019/11/07 Python
python实现tail -f 功能
2020/01/17 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
Python grpc超时机制代码示例
2020/09/14 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
比较基础的php面试题及答案-编程题
2012/10/14 面试题
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
捐款通知怎么写
2015/04/24 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
python pygame 开发五子棋双人对弈
2022/05/02 Python