查看图片（前进后退）功能实现js代码

注：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>