查看图片(前进后退)功能实现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 相关文章推荐
js 字符串转化成数字的代码
Jun 29 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
js中位运算的运用实例分析
Dec 11 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 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
一个PHP数组应该有多大的分析
2009/07/30 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
PHP实现的日历功能示例
2018/09/01 PHP
javascript 写类方式之七
2009/07/05 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
实例分析javascript中的异步
2020/06/02 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
python计算日期之间的放假日期
2018/06/05 Python
flask中的wtforms使用方法
2018/07/21 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
对python函数签名的方法详解
2019/01/22 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
网站编辑求职信
2013/10/17 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
2014年党支部工作总结
2014/11/13 职场文书
财务工作个人总结
2015/02/27 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle