基于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 相关文章推荐
js显示时间 js显示最后修改时间
Jan 02 Javascript
JS 获取滚动条高度示例代码
Oct 24 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
angular中如何绑定iframe中src的方法
Feb 01 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 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
文件上传类
2006/10/09 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
JavaScript中的cacheStorage使用详解
2015/07/29 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
python黑魔法之参数传递
2016/02/12 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
python实现泊松图像融合
2018/07/26 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
财务会计人员岗位职责
2013/11/30 职场文书
生产总经理岗位职责
2013/12/19 职场文书
大学生先进事迹材料
2014/02/16 职场文书
服务标兵事迹材料
2014/05/04 职场文书
安全标语口号
2014/06/09 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
沈阳故宫导游词
2015/01/31 职场文书
撤诉书怎么写
2015/05/19 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
Python字符串的转义字符
2022/04/07 Python