<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#left {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 20%;
cursor: pointer;
}
#right {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
right: 20%;
cursor: pointer;
}
#img_box {
width: 50%;
display: block;
margin: auto auto;
border: 1px solid #e0e0e0;
}
#append {
display: block;
margin-left: auto;
margin-right: auto;
max-height: 100%;
}
</style>
<script type="text/javascript">
window.onload = function () {
var img_box = document.getElementById("img_box");
var h = document.body.offsetHeight;
img_box.style.height = (h * 4) / 5 + "px";
document.getElementById("left").onclick = function () {
//阻止事件冒泡
var e = event || window.event;
e.stopPropagation();
//设定变量
var dcp = "dcp/", dzfy = "dzfy/", jpg = ".jpg", a, b, c;
//获取放置图片的img里的图片路径
var src = document.getElementById("append").getAttribute("src");
//截取路径的前三位
a = src.substr(0, 3);
//判断
if (a == "dcp") {
//将路径以"/"为界分为两个一维数组
b = src.split('/');
//给b赋值序号为1的第二个一维数组
b = b[1];
//把数组里的".jpg"替换成空（即"1.jpg"变为"1"）
b = b.replace('.jpg', '');
//将string类型转换为int类型
b = parseInt(b);
//判断
if (b == 1) {
c = 52;
} else {
c = b - 1;
}
//重新给id为append的img标签赋予新的图片路径
document.getElementById("append").setAttribute("src", dcp + c + jpg);
}
}
document.getElementById("right").onclick = function () {
//阻止事件冒泡
var e = event || window.event;
e.stopPropagation();
//设定变量
var dcp = "dcp/", dzfy = "dzfy/", jpg = ".jpg", a, b, c;
//获取放置图片的img里的图片路径
var src = document.getElementById("append").getAttribute("src");
//截取路径的前三位
a = src.substr(0, 3);
//判断
if (a == "dcp") {
//将路径以"/"为界分为两个一维数组
b = src.split('/');
//给b赋值序号为1的第二个一维数组
b = b[1];
//把数组里的".jpg"替换成空（即"52.jpg"变为"52"）
b = b.replace('.jpg', '');
//将string类型转换为int类型
b = parseInt(b);
//判断
if (b == 52) {
c = 1;
} else {
c = b + 1;
}
//重新给id为append的img标签赋予新的图片路径
document.getElementById("append").setAttribute("src", dcp + c + jpg);
}
}
}
</script>
</head>
<body>
<img id="left" src="img/left.png" />
<div id="img_box">
<img id="append" src="dcp/1.jpg" />
</div>
<img id="right" src="img/right.png" />
</body>
</html>
