想要的是点击右边箭头或者左边箭头时下面的按钮随着图像的移动而改变
现在的问题是移动一两次之后就发现下面的按钮就和图片不一致了，想要图片和按钮的现实状态一致，不知道代码问题出在哪里？请大家帮我看看，谢谢了
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#continer{ width:600px; height:500px; position:absolute;overflow:hidden; z-index:1}
#list{ width:3600px; height:500px; position:relative;left:-600px;z-index:1}
#list img{ width:600px; height:500px;float:left}
#arrow{width:600px; height:50px; position:absolute;left:0; top:225px; z-index:2;}
#arrow img{ width:50px; height:50px; opacity:0.6; cursor:pointer;}
#arrow1{ float:left; margin-left:15px}
#arrow2{ float:right; margin-right:15px}
#button{ width:150px; height:30px; position:absolute; left:200px; top:450px; z-index:2;}
#button input{ background-color:rgba(204,102,0,1)}
</style>
</head>
<body>
<div id="continer">
<div id="arrow">
<img src="321.png" id="arrow1">
<img src="123.png" id="arrow2">
</div>
<div id="button">
<input type="radio" name="图片">
<input type="radio" name="图片">
<input type="radio" name="图片">
<input type="radio" name="图片">
</div>
<div id="list">
<img src="4.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="1.jpg">
</div>
</div>
<script>
var continer=document.getElementById("continer");
var list=document.getElementById("list");
var button=document.getElementById("button").getElementsByTagName("input");
var arrow=document.getElementById("arrow");
var arrow1=document.getElementById("arrow1");
var arrow2=document.getElementById("arrow2");
var index=1;
function show(){
/* for(i=0;i<button.length;i++){
//alert(button.length)
if(button[i].checked=true){
button[i].checked=false
break;}
}*/
button[index-1].checked=true;
}
function move(offset){
list.style.left=list.offsetLeft+offset+"px";
if(list.offsetLeft>-600){
list.style.left=-3000+"px"
}
if(list.offsetLeft<-3000){
list.style.left=-600+"px";
}
}
arrow1.onclick=function (offset){
//alert(list.offsetLeft)
//list.style.left=list.offsetLeft+600+"px"
if(index==1){
index=4;
}
else{
index-=1;}
move(600);
show();
}
arrow2.onclick=function (offset){
//alert(list.offsetLeft)
//list.style.left=list.offsetLeft-600+"px";
if(index==4){
index=1;
}
else{
index+=1;
}
move(-600);
show();
}
</script>
</body>
</html>
