想要的是點擊右邊箭頭或者左邊箭頭時下面的按鈕隨著圖像的移動而改變
現(xiàn)在的問題是移動一兩次之后就發(fā)現(xiàn)下面的按鈕就和圖片不一致了，想要圖片和按鈕的現(xiàn)實狀態(tài)一致，不知道代碼問題出在哪里？請大家?guī)臀铱纯?，謝謝了
<!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>
2016-08-11
把按鈕的背景圖先display：none隱藏掉，然后你的index到哪一張大圖的時候給對應大圖的按鈕背景圖添加一個div{display：block}就行了