小圆点不能正常亮起-慕课网

小圆点不能正常亮起

来源：4-1 无限滚动

tracylqd

2017-07-12 10:14

<!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">&lt;</a>
        <a href="javascript:;" id="next">&gt;</a>
</div>
</body>
</html>

我的小圆点不能正常亮起来，点击next()的时候index不能正常+1；点击第二次的时候第二个小圆点才亮起来，有大神解释一下吗？

写回答关注

3回答

qq_一桥轻雨一伞开_2

2017-08-08 22:12:40

已采纳

红色区域的代码与蓝色区域的代码换下位置顺序

1 0

tracyl...

谢谢！我已经发现了。

2017-08-15 13:21:05

共 1 条回复 >
qq_一桥轻雨一伞开_2

2017-08-09 09:19:20

而且你的a标签少了类名arrow

0 0
tracylqd

2017-07-12 10:19:00

<!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>

0 0

焦点图轮播特效

通过本教程学习您将能掌握非常实用的焦点图轮播特效的制作过程

65279 学习 · 611 问题

查看课程

相似问题

别的都好理解，就是亮起小圆点的同时其他小圆点熄灭。这段代码逻辑不通呀？

回答 2

第五个小圆点点击之后不能回到第一个小圆点

回答 2

问一下，删除小圆点的逻辑顺序，是先for循环把已on的圆点全删除了，然后再执行上一行，亮起一个小圆点吗

回答 3

-600的图片和第一个小圆点不是一起

回答 2

小圆点问题

回答 2

打开慕课网App查看更多内容