基于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 instanceof 内部机制探析
Oct 15 Javascript
jquery tab插件精简版分享
Sep 10 Javascript
js数组的操作详解
Mar 27 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
Sep 28 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
Feb 06 Javascript
vue实现移动端div拖动效果
Mar 03 Vue.js
查看图片(前进后退)功能实现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
基于mysql的bbs设计(一)
2006/10/09 PHP
PHP新手上路(二)
2006/10/09 PHP
php实现的MySQL通用查询程序
2007/03/11 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
javascript中的缓动效果实现程序
2012/12/29 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
基于python的字节编译详解
2017/09/20 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
python监控进程脚本
2018/04/12 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
pandas中ix的使用详细讲解
2020/03/09 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
求职信模板标准格式范文
2014/02/23 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
中国世界遗产导游词
2015/02/13 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js