基于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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
Dec 08 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
koa2的中间件功能及应用示例
Mar 05 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 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 Ctemplate引擎开发相关内容
2012/03/03 PHP
实例讲解php实现多线程
2019/01/27 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
js window.event对象详尽解析
2009/02/17 Javascript
jquery.validate使用攻略 第二部
2010/07/01 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
Python多线程实例教程
2014/09/06 Python
python实现聚类算法原理
2018/02/12 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
提升python处理速度原理及方法实例
2019/12/25 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
python3.4中清屏的处理方法
2020/07/06 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
C#可否对内存进行直接的操作
2015/02/26 面试题
Linux中如何用命令创建目录
2016/12/02 面试题
公司行政经理岗位职责
2013/12/24 职场文书
旅游安全协议书
2014/04/21 职场文书
期末学生评语大全
2014/04/24 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
员工担保书范本
2015/09/22 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL