查看图片(前进后退)功能实现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 instanceof 与typeof使用说明
Jan 11 Javascript
js 创建快捷方式的代码(fso)
Nov 19 Javascript
node.js中的fs.readlinkSync方法使用说明
Dec 17 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
angular中实现控制器之间传递参数的方式
Apr 24 Javascript
angular使用post、get向后台传参的问题实例
May 27 Javascript
node实现的爬虫功能示例
May 04 Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 Javascript
javascript解析json格式的数据方法详解
Aug 07 Javascript
Vue 构造选项 - 进阶使用说明
Aug 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
全国FM电台频率大全 - 27 陕西省
2020/03/11 无线电
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
php加密解密实用类分享
2014/01/07 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
详解AngularJS中的依赖注入机制
2015/06/17 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
Python中AND、OR的一个使用小技巧
2015/02/18 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
python实现最长公共子序列
2018/05/22 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
综合办公室主任岗位职责
2014/04/13 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
自荐信范文
2019/05/20 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
pytorch 实现变分自动编码器的操作
2021/05/24 Python