小圓點不能正常亮起
<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>Document</title>
<style>
*{margin:?0?;padding:?0}
#container?{width:?200px;overflow:?hidden;position:?relative;height:?200px}
#list?{width:?1000px;position:?absolute;}
.v?{float:?left;width:?200px;height:?200px;background:?red}
#buttons?{position:?absolute;right:?10px;bottom:?10px;}
#buttons?span?{display:?block;width:?10px;height:?10px;border-radius:?50%;background:?gray;float:?left;margin:?0?5px;}
#buttons?.on?{background:?orange}
.arrow?{display:?block;width:?10px;height:?40px;background:?rgba(125,125,125,.5);line-height:?40px;position:?absolute;top:?80px;}
#prev?{left:?0}
#next?{right:?0}
</style>
<script>
window.onload=function(){
var?container=document.getElementById("container");
var?list=document.getElementById("list");
var?buttons=document.getElementById("buttons").getElementsByTagName("span");
var?next=document.getElementById("next");
var?prev=document.getElementById("prev");
var?index=1;
function?show(){
for(var?i=0;i<buttons.length;i++){
if(buttons[i].className?=="on"){
buttons[i].className?=?"";
break;
}
}
buttons[index?-?1].className?="on";
}
next.onclick=function(){
show();
index?+=?1;
}
prev.onclick=function(){
show();
index?-=?1;
}
}
</script>
</head>
<body>
<div?id="container">
<div?id="list"?style="left:-200px">
???<div>3</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>1</div>
</div>
<div?id="buttons">
<span?index="1"?class="on"></span>
<span?index="2"></span>
<span?index="3"></span>
</div>
<a?href="javascript:;"?id="prev"><</a>
????????<a?href="javascript:;"?id="next">></a>
</div>
</body>
</html>我的小圓點不能正常亮起來，點擊next()的時候index不能正常+1；點擊第二次的時候第二個小圓點才亮起來，有大神解釋一下嗎？
2017-08-08
紅色區(qū)域的代碼與藍色區(qū)域的代碼換下位置順序
2017-08-09
而且你的a標簽少了類名arrow
2017-07-12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0 ;padding: 0}
#container {width: 200px;overflow: hidden;position: relative;height: 200px}
#list {width: 1000px;position: absolute;}
.v {float: left;width: 200px;height: 200px;background: red}
#buttons {position: absolute;right: 10px;bottom: 10px;}
#buttons span {display: block;width: 10px;height: 10px;border-radius: 50%;background: gray;float: left;margin: 0 5px;}
#buttons .on {background: orange}
.arrow {display: block;width: 10px;height: 40px;background: rgba(125,125,125,.5);line-height: 40px;position: absolute;top: 80px;}
#prev {left: 0}
#next {right: 0}
</style>
<script>
window.onload=function(){
var container=document.getElementById("container");
var list=document.getElementById("list");
var buttons=document.getElementById("buttons").getElementsByTagName("span");
var next=document.getElementById("next");
var prev=document.getElementById("prev");
var index=1;
function show(){
for(var i=0;i<buttons.length;i++){
if(buttons[i].className =="on"){
buttons[i].className = "";
break;
}
}
buttons[index - 1].className ="on";
}
next.onclick=function(){
show();
index += 1;
}
prev.onclick=function(){
show();
index -= 1;
}
}
</script>
</head>
<body>
<div id="container">
<div id="list" style="left:-200px">
? ?<div>3</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>1</div>
</div>
<div id="buttons">
<span index="1"></span>
<span index="2"></span>
<span index="3"></span>
</div>
<a href="javascript:;" id="prev"><</a>
? ? ? ? <a href="javascript:;" id="next">></a>
</div>
</body>
</html>