查看图片(前进后退)功能实现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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
Js表格万条数据瞬间加载实现代码
Feb 20 Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
基于bootstrap风格的弹框插件
Dec 28 Javascript
JavaScript数组迭代方法
Mar 03 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 Javascript
js实现抽奖的两种方法
Mar 19 Javascript
JavaScript 实现页面滚动动画
Apr 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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
PHP的FTP学习(一)[转自奥索]
2006/10/09 PHP
php 常用类整理
2009/12/23 PHP
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
php设计模式 Composite (组合模式)
2011/06/26 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
ECMAScript6--解构
2017/03/30 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
基于Django的python验证码(实例讲解)
2017/10/23 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
Python可迭代对象操作示例
2019/05/07 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
详解Django 时间与时区设置问题
2019/07/23 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
int和Integer有什么区别
2013/05/25 面试题
学习与创新自我评价
2015/03/09 职场文书
检讨书格式范文
2015/05/07 职场文书
2015入党自传书范文
2015/06/26 职场文书
学校安全管理制度
2015/08/06 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers