基于jQuery实现图片的前进与后退功能


Posted in Javascript onApril 24, 2013
<!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="jquery-1.9.1.js" type="text/javascript"></script> 
<script src="Jquery1.7.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
var array = [1, 2, 3, 4, 5, 6]; 
var count = 0; 
//后退 
$('#Button1').click(function () { 
if (count > 0) { 
count--; 
$('img').attr('src', 'images/' + array[count] + '.jpg'); 
} 
}) 
//前进 
$('#Button2').click(function () { 
if (count < 5) { 
count++; 
$('img').attr('src', 'images/' + array[count] + '.jpg'); 
} 
}) 
}) 
</script> 
</head> 
<body> 
<div id="mydiv"> 
<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> 
</div> 
</body> 
</html>

效果如下:
基于jQuery实现图片的前进与后退功能
Javascript 相关文章推荐
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
Apr 20 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
Javascript基础_标记文字的实现方法
Jun 14 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
学习RxJS之JavaScript框架Cycle.js
Jun 17 Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 Javascript
原生JS实现无缝轮播图片
Jun 24 Javascript
查看图片(前进后退)功能实现js代码
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
You might like
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
JS常用算法实现代码
2016/11/14 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
一文总结学习Python的14张思维导图
2017/10/17 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
numpy.random模块用法总结
2019/05/27 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
使用python+whoosh实现全文检索
2019/12/09 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
python实现简单俄罗斯方块
2020/03/13 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
vscode调试django项目的方法
2020/08/06 Python
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
一套比较完整的软件测试人员面试题
2012/05/13 面试题
药学专业个人的自我评价
2013/12/31 职场文书
简历中的自我评价怎么写
2014/01/29 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
教师年度个人总结
2015/02/11 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android