！！JS图片问题！！

css属性中有其他元素没有删除
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>---幻灯片---</title>
<style type="text/css">
.tp1 {
border:3px solid #cccccc;
width:465px;
height:349px;
position:absolute;
display:block;
}
.tp2 {
border:3px solid #cccccc;
width:465px;
height:349px;
position:absolute;
display:none;
}
.tp3{
  width:10px;
  height:10px;
}
.bgoff{
  width:30px;
  text-align:center;
  background-color:#cccccc;
  border:1px solid #ff0000;
  position:absolute;
  top:auto;
}
.bgon{
  width:30px;
  text-align:center;
  background-color:#ff9900;
  border:1px solid #ff0000;
  position:absolute;
  top:auto;
}
.yc{
  display:none;
}
.xs{
display:block;
}
a:link,a:active,a:visited,a:hover{color:#000000;text-decoration:none;}
#top a:link,#top a:active,#top a:visited,#top a:hover{color:#cccccc;text-decoration:none;}
#top{
  width:400px;
  position:absolute;
  top:auto;
  z-index:auto;
  margin:0px 500px
}
</style>
</head>
<body>
<div>
    <a href="#"><div id="b1" class="bgoff" style="z-index:5;margin:330px 300px" onclick="tup(1)" onMouseOver="backgroundon(this)" onMouseOut="backgroundoff(this)">1</div></a>
    <a href="#"><div id="b2" class="bgoff" style="z-index:4;margin:330px 330px" onclick="tup(2)" onMouseOver="backgroundon(this)" onMouseOut="backgroundoff(this)">2</div></a>
    <a href="#"><div id="b3" class="bgoff" style="z-index:3;margin:330px 360px" onclick="tup(3)" onMouseOver="backgroundon(this)" onMouseOut="backgroundoff(this)">3</div></a>
    <a href="#"><div id="b4" class="bgoff" style="z-index:2;margin:330px 390px" onclick="tup(4)" onMouseOver="backgroundon(this)" onMouseOut="backgroundoff(this)">4</div></a>
    <a href="#"><div id="b5" class="bgoff" style="z-index:1;margin:330px 420px" onclick="tup(5)" onMouseOver="backgroundon(this)" onMouseOut="backgroundoff(this)">5</div></a>
    <div id="a1" class="tp1"><image src="tp/1.jpg"></div>
    <div id="a2" class="tp1"><image src="tp/2.jpg"></div>
    <div id="a3" class="tp1"><image src="tp/3.jpg"></div>
    <div id="a4" class="tp1"><image src="tp/4.jpg"></div>
    <div id="a5" class="tp1"><image src="tp/5.jpg"></div>
</div>
</body>
</html>
<script language="javascript" type="text/javascript">
//=============================图片按钮====================================================== function backgroundon(bgon){
    bgon.className="bgon";
}
function backgroundoff(bgoff){
    bgoff.className="bgoff";
}
function tup(wq){
document.getElementById("a" + wq).className="tp1";
for(i=1;i<=5;i++){
if (wq!=i){
document.getElementById("a" + i).className="tp2";
}
}
}
//============================图片自动跳转=====================================================
j=1;
function tupian(){
document.getElementById("a" + j).className="tp1";
for(i=1;i<=5;i++){
if (j!=i){
document.getElementById("a" + i).className="tp2";
}
}
j++;
if (j<=5){
setTimeout("tupian()",1500);
}else{
j=1;
setTimeout("tupian()",1500);
}
}
document.write(tupian());
</script>