代码思路：
点击向左的按钮以后显示左侧预先放置好图片来保证平滑动画效果。
为了保证显示效果的平滑防止左侧无内容，将本应出现在左侧的图片预先放置到最左侧①。为了避免这个图片第一个显示，我们要通过CSS将这个图片的容器(父级)向左侧移动，隐藏这个图片。由于一个图片宽度是141px，设定CSS内父级元素左侧距离-141px②。并修改JS内的基准CSS坐标为-141px③移动最后一个元素到第一位的时候必须要移动到第一位前面，after的反义词是before。修改函数名，将插入点移动到第一个元素前面④。其余代码由提问者提供。不做解释。
附上效果图+代码说明：
以下内容只包含关键代码！
HTML部分：
<div class="imgxianshi_1"><div class="imgbox_1">
<img class="tupian10" src="images/tupian_10.png"><!--①:预先放置到左侧-->
<img class="tupian01" src="images/tupian_01.png">
<img class="tupian02" src="images/tupian_02.png">
<img class="tupian03" src="images/tupian_03.png">
<img class="tupian04" src="images/tupian_04.png">
<img class="tupian05" src="images/tupian_05.png">
<img class="tupian06" src="images/tupian_06.png">
<img class="tupian07" src="images/tupian_07.png">
<img class="tupian08" src="images/tupian_08.png">
<img class="tupian09" src="images/tupian_09.png">
</div>
</div>
CSS部分：
.imgbox_1{ width:3400px height:91px position:absolute top:0px left:-141px margin:0 auto } /* ②left:-141px调整距离 */JS部分：
/*点左按钮向左走*/$(".bj_20").click(function(){
$(".imgbox_1").animate({left:0},1000,function(){/* ③向左要增加left，基准-141增加141就是0，left:0 */
$(".imgbox_1 img:last").insertBefore($(".imgbox_1 img:first"))//④在第一个元素之前插入
$(".imgbox_1").css({left:-141})//③修改基准为-141
})
})
/*点右按钮向右走*/
$(".bj_21").click(function(){
$(".imgbox_1").animate({left:-282},1000,function(){/* ③向右要减少left，基准-141减少141就是-282，left:-282 */
$(".imgbox_1 img:first").insertAfter($(".imgbox_1 img:last"))//④在最后一个元素之后插入
$(".imgbox_1").css({left:-141})//③修改基准为-141
})
})
})
relative绝对定位，left，top值相对于自身移动，absolute相对定位，left，top值相对于其父级或者祖先级中第一个设置relative的位置进行移动，如果没有设置则相对于body的位置移动，absolute会脱离正常的文本流，撑不开父级高度，而relative不会。<html><head>
<title>图片的显示</title>
<style type="text/css">
<!--
#bg1 {
position:absolute
width:162px
height:115px
z-index:1
}
#bg2 {
position:absolute
width:162px
height:115px
z-index:1
left: 1px
top: 1px
display:none
}
#b1 {
position:absolute
width:22px
height:21px
z-index:2
left: 60px
top: 201px
}
#b2 {
position:absolute
width:22px
height:24px
z-index:3
left: 84px
top: 203px
}
-->
</style>
<script>
function showbg1(){
document.getElementById("bg1").style.display="block"
document.getElementById("bg2").style.display="none"
}
function showbg2(){
document.getElementById("bg1").style.display="block"
document.getElementById("bg2").style.display="block"
}
</script>
</head>
<body>
<div id="bg1"><img src="mao.jpg" width="160" height="180" />
<div id="bg2"><img src="haitun.jpg" width="160" height="180" /></div>
</div>
<p></p>
<div id="b1" onmousemove="showbg1()"><img src="b1.png" width="22" height="20" /></div>
<div id="b2" onmousemove="showbg2()"><img src="b2.png" width="18" height="19" /></div>
</body>
</html>
