老师帮忙检查下代码，小圆点不能点击
来源：2-4 轮播图上圆点按钮
罗杰明
2020-01-20 22:08:55
<html>
<head>
<meta charset="UTF-8">
<title>轮播</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="main" id="main">
<div class="banner" id="banner">
<a href="">
<div class="banner-slide slide1 slide-active"></div>
</a>
<a href="">
<div class="banner-slide slide2"></div>
</a>
<a href="">
<div class="banner-slide slide3"></div>
</a>
</div>
<a href="javascript:void(0)" class="button prev"></a>
<a href="javascript:void(0)" class="button next"></a>
<div class="dots">
<span class="active" id="dots"></span>
<span></span>
<span></span>
</div>
</div>
<script type="text/javascript" src="test.js"></script>
</body>
</html>
margin:0px;
padding:0px;
}
ul{
list-style:none;
}
body{
font-family:"微软雅黑";
color:#14191e;
}
.main{
width:1200px;
height:460px;
margin:30px auto;
overflow:hidden;
position:relative;
}
.banner{
width:1200px;
height:460px;
overflow:hidden;
position:relative;
}
.banner-slide{
width:1200px;
height:460px;
position:absolute;
background-repeat:no-repeat;
display:none;
}
.slide1{
background-image:url("img/bg1.jpg");
}
.slide2{
background-image:url("img/bg2.jpg");
}
.slide3{
background-image:url("img/bg3.jpg");
}
.slide-active{
display:block;
}
.button{
position:absolute;
width:40px;
height:80px;
left:244px;
top:50%;
margin-top:-40px;
background:url(img/arrow.png) no-repeat center center;
}
.prev{
transform:rotate(180deg);
}
.next{
right:0px;
left:auto;
}
.button:hover{
background-color:gray;
opacity:0.8;
}
.dots{
position:absolute;
right:20px;
bottom:2px;
text-align:right;
}
.dots span{
display:inline-block;
width:12px;
line-height:12px;
height:12px;
border-radius:50%;
background:rgba(7,17,27,0.4);
box-shadow:0 0 0 2px rgba(255,255,255,0.8) inset;
margin-left:8px;.
cursor:pointer;
}
.dots span.active{
box-shadow:0 0 0 2px rgba(7,17,27,0.4) inset;
background:#FFF;
}
function byId(id){
return typeof(id) === "string"?document.getElementById(id):id;
}
var index=0;
var timer=null;
var pics=byId("banner").getElementsByTagName("div");
var len=pics.length;
var dots=byId("dots").getElementsByTagName("span");
function slideImg(){
var main=byId("main");
main.onmouseover=function(){
if(timer) clearInterval(timer);
}
main.onmouseout=function(){
timer=setInterval(function(){
index++;
if(index>=len){
index=0;
}
changeImg();
},1500);
}
main.onmouseout();
for(var d=0;d<len;d++){
dots[d].onclick=function(){
alert("123");
}
}
}
function changeImg(){
for(var i=0; i<len;i++){
pics[i].style.display="none";
}
pics[index].style.display="block"
}
slideImg();
1回答
-
同学你好，试验同学的代码，在控制台报如下错误：
在html中，id = “dots”应该加在div中，而不是span标签中，如：
这样小圆点就可以点击了。
如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~
0
相似问题
回答 1
回答 2