老师我这边给小圆点添加current类，发现实现不了。而且圆点点击事件也没出来问题没能找出来
来源：2-4 代码编写（2）
Vigorous阿炎
2020-11-24 11:25:40
html部分
<div class="banner">
<div class="banner-1">
<ul class="bn_2" id="bn_2">
<li><img class="img_1" src="images/banner01.png" alt=""></li>
<li><img src="images/banner02.png" alt=""></li>
<li><img src="images/banner03.png" alt=""></li>
</ul>
<ol class="yuandian" id="yuandian">
<li data-n="0" class="current"></li>
<li data-n="1"></li>
<li data-n="2"></li>
</ol>
</div>
css部分
.banner .banner-1 img{
width: 100%;
height: 650px;
position: relative;
}
.banner .banner-1 ul li{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 650px;
transition: all 3s linear 0s;
opacity: 0;
}
.banner .banner-1 ul li:first-child{
opacity: 1;
}
.banner .banner-1 {
position: relative;
width: 100%;
height: 650px;
margin-bottom: 38.3px;
}
.banner .banner-1 .yuandian{
position: absolute;
bottom: 0;
left: 50%;
margin-left: -25px;
margin-bottom: 50px;
width:80px;
height: 10px;
}
.banner .banner-1 .yuandian li{
float: left;
width: 10px;
height: 10px;
border-radius: 10px;
background-color: #fff;
margin-right: 10px;
}
.banner .banner-1 .yuandian li.current{
background-color: rgb(66, 92, 238);
}
.banner .banner-1 .yuandian li:hover{
transform: scale(1.5);
}
js部分
(function(){
var bn_2=document.getElementById('bn_2') //获取ul
var lis=bn_2.getElementsByTagName('li') //获取li元素
var idx=0;
var timer;
move();
function move() {
clearInterval(timer)
timer= setInterval(function(){
lis[idx].style.opacity=0;
idx++;
if(idx>2)idx=0;
lis[idx].style.opacity=1;
},2000)
setCircle();
}
bn_2.onmouseenter=function(){
clearInterval(timer)
};
bn_2.onmouseleave=function () {
move();
}
//设置小圆点current类
var yuandian=document.getElementById('yuandian')
var ydLis=yuandian.getElementsByTagName('li')
function setCircle() {
for(var i=0;i<=2;i++){
if(i==idx){
ydLis[i].className='current'
}else{
ydLis[i].className='';
}
}
}
//事件监听，小圆点
yuandian.onclick=function(e) {
if(e.target.tagName.toLowerCase()=='li'){
alert(e.target.getAttribute('data-n'))
}
}
})()
在这里输入代码，可通过选择【代码语言】突出显示
3回答
-
好帮手慕久久
2020-11-24
同学你好，代码中有如下问题：
1. 代码是从上往下执行的，由于获取小圆点的代码，写了在move()下面，所以执行move方法时，内部的setCircle方法会由于找不到小圆点（圆点还没有获取呢）而报错：
修改如下：
2. setCircle这个方法的作用是改变小圆点的类名，因此定时器每执行一次，就要调用一次它，即定时器每执行一次，小圆点样式也要对应改变，修改如下：
祝学习愉快！
1h020-11-24 -
好帮手慕久久
2020-11-24
同学你好，老师给你调整后，能够正确弹出data-n：
建议同学新建一个问题，把自己调整后的代码粘贴出来，老师再帮你检查。
祝学习愉快！0h020-11-24 -
好帮手慕久久
2020-11-24
同学你好，其实主要原因是经验太少了，所以很多问题，自己找不出来，不要着急。建议多练习，练得多，遇到的问题就会多，对应就会知道哪里容易出问题，可能会出现哪些问题，以及怎么解决问题。在工作中（平时练习也适用），遇到bug时，要先看控制台有没有报错（大概翻译一下报错信息，就能知道报错是什么意思），有报错的话，就看哪里代码报错了，然后对应检查语法拼写是否有错误、代码书写顺序是否有问题，最后再屡逻辑。如果控制台没有报错，那么就优先检查逻辑。
祝学习愉快！
0h020-11-24
相似问题