查看图片(前进后退)功能实现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下function声明一些小结
Dec 28 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
Feb 15 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
Vue.js 踩坑记之双向绑定
May 03 Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 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的autoLoad自动加载机制
2012/09/27 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
关于JavaScript的一些看法
2009/05/27 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
十条建议帮你提高Python编程效率
2016/02/16 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
基于Python的接口测试框架实例
2016/11/04 Python
python如何实现内容写在图片上
2018/03/23 Python
Python中一行和多行import模块问题
2018/04/01 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
使用python实现飞机大战游戏
2020/03/23 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
烹饪自我鉴定
2014/03/01 职场文书
高中生评语大全
2014/04/25 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
党员廉政准则心得体会
2016/01/20 职场文书
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS