Question

JS 上一张 下一张图片的问题求教

<style>
.content1 {
height: 355px;
width: 810px;
display:block;
}
.content2 {
height: 355px;
width: 810px;
display:none;
}
</style>
<script>
function aaa(num){
for(var id = 1;id<=4;id++){
if(id==num){document.getElementById("aa"+id).className="content1";}
else{document.getElementById("aa"+id).className="content2";}
}}

function bbb(num){
num=num+1;
if (num=4){num=1;}
for(var id = 1;id<=4;id++){
if(id==num){document.getElementById("aa"+id).className="content1";}
else{document.getElementById("aa"+id).className="content2";}
}}

function ccc(num){
num=num-1;
if (num=1){num=4;}
for(var id = 1;id<=4;id++){
if(id==num){document.getElementById("aa"+id).className="content1";}
else{document.getElementById("aa"+id).className="content2";}
}}

</script>
<table width="94%" height="254" border="1">
<tr>
<td width="12%" height="61"> </td>
<td width="75%" align="center"><a href="#" onclick="aaa(1)" >校园图片</a>     <a href="#"onclick="aaa(2)">硬件设施</a>     <a href="#"onclick="aaa(3)">学生宿舍</a>   <a href="#"onclick="aaa(4)">西点教室</a></td>
<td width="13%"> </td>
</tr>
<tr>
<td><div><a href="#" OnClick=bbb(1)>上一步</a></div></td>
<td><!--校园环境-->
<div class="content1" id="aa1"><img src="1.jpg" width="770px" height="340px"/></div>
<div class="content2" id="aa2"><img src="2.jpg" width="770px" height="340px"/></div>
<div class="content2" id="aa3"><img src="3.jpg" width="770px" height="340px"/></div>
<div class="content2" id="aa4"><img src="4.jpg" width="770px" height="340px"/></div>
<!--生活环境-->
</td>
<td><div><a href="#" OnClick=ccc(4)>下一步</a></div></td>
</tr>
</table>
还有就是图片切换的时候可不可以从左到右或者是从右到左的出来图片

Answer 1

看一个实蔽段氏例，请宏散参燃陆考http://blog.163.com/fan_yishan/blog/static/476922132012039557599/