手动切换图片只是实现了功能，并没有对页面样式做很好的优化。因为现在只是讲解这个图片切换的功能，没有必要花太多的时间和精力在界面优化上面。下面先把代码和样式图奉上再进行讲解。
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>手动切换图片</title>
<style type="text/css">
.imageStyle{width: 400px;height: 300px;background-repeat: no-repeat;list-style-type: none;}
.switchStyle{float: left;height: 300px;line-height: 300px;background-color: gray;color: white;cursor: pointer;}
</style>
<script type="text/javascript">
var showNo = 0; //当前显示图片在数组中下标
function showByIndex(dir){
var imageShow = document.getElementById("imageShow");
var images = imageShow.getElementsByTagName("div");
if(dir==0){ //dir为0，显示当前图片前面的图片，否则显示当前图片后面的图片
showNo=showNo+images.length-1; //因为负数取余的逻辑是绝对值取余之后再取相反数。比如5%3=2；-5%3=-2，而实际上应该为1
}else{
showNo=showNo+1;
}
showNo=showNo%(images.length);
for(var i=0;i<images.length;i++){
if(showNo==i){
images[i].style.display='block';
}else{
images[i].style.display='none';
}
}
}
</script>
</head>
<body>
<div style="left: 100px;top: 50px;position: absolute;">
<div id="leftDiv" class="switchStyle" onclick="showByIndex(0)">《</div>
<div id="showDiv" style="float: left;">
<div id="imageShow">
<div class="imageStyle" style="background-image: url('images/psbCAMVXF5F.jpg');display: block;"></div>
<div class="imageStyle" style="background-image: url('images/psbCAQUOM5Z.jpg');display: none;"></div>
<div class="imageStyle" style="background-image: url('images/psbCAT61K9Y.jpg');display: none;"></div>
</div>
</div>
<div id="rightDiv" class="switchStyle" onclick="showByIndex(1)">》</div>
</div>
</body>
</html>样式图：
具体讲解部分：
这个功能的实现逻辑也很简单，下面分三步进行讲解。
1、首先是获取id为imageShow下面的所有div（每个div都是一张图片），注意这里使用div的原因是div简单，而且好布局，实际应用中什么可以显示图片的元素都可以。只要把imageShow.getElementsByTagName("div")里面的参数变成对应的元素就好了。这样取到了所有需要展示的图片并放到了images这个数组中。
2、然后我们定义了一个变量showNo用来控制数组中对应下标的图片进行展示。图片区域左右两边的div都调用了同一个方法showByIndex。它们的区别就是参数不同，左边的div点击1次让showNo减1，右边的div点击1次让showNo加1。
3、最后循环遍历images数组，如果下标等于showNo就显示，否则就隐藏。这样功能就算实现了。
不过在应用中发现了一个问题。js的取余方法%正数取余是正确的，负数的取余会是一个负数。如果取一个数组的负数下标是很危险的，所以为了保证showNo的取余没问题，我们加了一个images的长度再取余，防止showNo为0时减1导致去取下标为负数的bug。然后图片随便找几个把背景换了就可以了，为了不错乱，三张图片高度要一致，如果高度不是300px，记得将样式中的高度调成和图片的高度一致。然后就可以运行了，期待效果吧！