编程 Javascript

基于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>

效果如下：

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js列举css中所有图标的实现代码

Jul 04 Javascript

JS中表单的使用小结

Jan 11 Javascript

JS小游戏之宇宙战机源码详解

Sep 25 Javascript

jQuery实现的网页左侧在线客服效果代码

Oct 23 Javascript

分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式

Sep 01 Javascript

Vue组件开发初探

Feb 14 Javascript

JS实现评价的星星功能

Aug 20 Javascript

Webpack的dll功能使用

Jun 28 Javascript

Vue.js构建你的第一个包并在NPM上发布的方法步骤

May 01 Javascript

vue + typescript + video.js实现流媒体播放视频监控功能

Jul 07 Javascript

js正则匹配多个全部数据问题

Dec 20 Javascript

在Vue中使用Viser说明(基于AntV-G2可视化引擎)

Oct 28 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