查看图片(前进后退)功能实现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 相关文章推荐
页面只能打开一次Cooike如何实现
Dec 04 Javascript
JS中不为人知的五种声明Number的方式简要概述
Feb 22 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
JS高阶函数原理与用法实例分析
Jan 15 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 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中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
Python实现字典去除重复的方法示例
2017/07/31 Python
python调用百度语音识别api
2018/08/30 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
pymongo中group by的操作方法教程
2019/03/22 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
社团文化节策划书
2014/02/01 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
2014年团队工作总结
2014/11/24 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
团组织推荐意见
2015/06/05 职场文书
刘胡兰观后感
2015/06/16 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis
MySQL分区以及建索引的方法总结
2022/04/13 MySQL