javascript - 多板块的图片同时轮换

Question

这里是html代码

<p class="slide-pic" id="slide-pic">

<p id="other" >

<p  style="background-color: #171B22;position:relative;width: 95px;height: 470px;z-index: -5;float: left;"></p>
<p  style="background-color: #171B22;position:relative;width: 95px;height: 470px;z-index: -5;float: right;"></p>
<!-- <p style="clear: both;"></p>-->
<p  style="background-color: #FCC836;position:relative;width: 95px;height: 470px;z-index: -5;float: left;"></p>
<p   style="background-color: #FCC836;position:relative;width: 95px;height: 470px;z-index: -5;float: right;"></p>

</p>

<p id="wrap">
<p id="slider">
<a target="_blank" href="#"><img src="img/img01.jpg" /></a>
<a target="_blank" href="#"><img src="img/img02.jpg" /></a>
<a target="_blank" href="#"><img src = "img/img03.jpg" /></a>
<a target="_blank" href="#"><img src = "img/img04.jpg" /></a>
</p>
<ul id="numb">
<li >1</li>
<li >2</li>
<li >3</li>
<li >4</li>
</ul>
</p>

</p>

这里是js代码

window.onload = function() {
flag = 0;
obj1 = document.getElementById("slider");
obj2 = document.getElementById("numb").getElementsByTagName("li");
obj3 = document.getElementById("other");
obj2[0].style.backgroundColor = "#666666";
//默认被选中颜色 
time = setInterval("turn();", 5000);
obj1,obj3.onmouseover = function() {
clearInterval(time);
}
obj1,obj3.onmouseout = function() {
time = setInterval("turn();", 6000);
}
for (var num = 0; num < obj2.length; num++) {
obj2[num].onmouseover = function() {
turn(this.innerHTML);
clearInterval(time);
}
obj2[num].onmouseout = function() {
time = setInterval("turn();", 6000);
}
}
}

function turn(value) {
if (value != null) {
flag = value - 2;
}
if (flag < obj2.length - 1) {
flag++;
} else {
flag = 0;
}
obj1.style.top = flag * (-480) + "px";
obj3.style.left = flag * (-95) + "px";

for (var j = 0; j < obj2.length; j++) {
obj2[j].style.backgroundColor = "#ffffff";
}
obj2[flag].style.backgroundColor = "#666666";
}

css代码

.slide-pic {
width: 100%;
height: 470px;
position: relative;
}

#wrap {
height: 470px;
width: 1000px;
overflow: hidden;
position: absolute;
left: 283px;
}
#other{
width:100%;
height: 470px;
position: absolute;
overflow: hidden;

}
#wrap ul {
list-style: none;
position: absolute;
top: 430px;
left: 350px;
}

#wrap li {
margin-left: 2px;
opacity: .8;
filter: alpha(opacity=80);
text-align: center;
line-height: 25px;
font-size: 15px;
height: 25px;
width: 25px;
background-color: white;
float: left;
border-radius: 3px;
cursor: pointer;
}

#slider {
position: absolute;
top: 0px;
left: 0px;
}

#slider img {
float: left;
border: none;
}