想要的是点击右边箭头或者左边箭头时下面的按钮随着图像的移动而改变
Echo_Chien
2016-08-11 16:30
现在的问题是移动一两次之后就发现下面的按钮就和图片不一致了，想要图片和按钮的现实状态一致，不知道代码问题出在哪里？请大家帮我看看，谢谢了
<!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>
1回答
-
- 肖小波
- 2016-08-11 18:15:31
把按钮的背景图先display：none隐藏掉，然后你的index到哪一张大图的时候给对应大图的按钮背景图添加一个div{display：block}就行了
焦点图轮播特效
65296 学习 · 611 问题
相似问题