老师帮忙看下这个错在哪里，点圆点切换没效果
来源：4-5 子菜单结构和样式（2）
慕虎5419128
2020-05-10 16:16:10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="lbt.css" />
</head>
<body>
<div class="main" id="main">
<!--图片轮播-->
<div class="banner" id="banner">
<a href="#">
<div class="b_slide slide1 s_active"></div>
</a>
<a href="#">
<div class="b_slide slide2 "></div>
</a>
<a href="#">
<div class="b_slide slide3"></div>
</a>
</div>
<a href="#" class="button prev" id="prev"></a>
<a href="#" class="button next" id="next"></a>
<!--点状图-->
<div class="dot" id="dot">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="lbt.js">
</script>
css代码
*{
margin: 0;
padding: 0;
}
#main{
width: 1200px;
height: 460px;
overflow: hidden;
position: relative;
}
.banner{
width: 1200px;
height: 460px;
position: relative;
}
.b_slide{
width: 1200px;
height: 460px;
background-repeat: no-repeat;
position: absolute;
display: none;
}
.slide1{
background-image: url(img/bg1.jpg);
}
.slide2{
background-image: url(img/bg2.jpg);
}
.slide3{
background-image: url(img/bg3.jpg);
}
.s_active{
display: block;
}
.button{
position: absolute;
width: 40px;
height: 80px;
left: 244px;
top: 50%;
margin-top: -40px;
transform: rotate(180deg);
background:url(img/arrow.png)center center no-repeat ;
/*background-color: blue;*/
}
.next{
left: auto;
right: 0px;
transform: rotate(0deg);
background:url(img/arrow.png)center center no-repeat ;
}
.dot{
position: absolute;
bottom: 24px;
right: 40px;
cursor: pointer;
}
.dot span{
width: 12px;
height: 12px;
background-color: rgba(7,17,27,0.5);
box-shadow: 0,0,0,2,rgba(255,255,255,0.8) inset;
display: inline-block;
border-radius: 50%;
margin-left: 8px;
}
.dot .active{
box-shadow: 0,0,0,2px rgba(7,17,27,0.6) inset;
background-color: #fff;
}
js代码
var timer = null;
var index = 0;
var main = document.getElementById("main");
var pics =document.getElementById("banner").getElementsByTagName("div");
var len = pics.length;
var dots = document.getElementById("dot").getElementsByTagName("span");
function slideImg(){
timer = setInterval(function(){
index++;
if(index>=len) index=0;
changeImg();
},2000)
main.onmouseout=timer;
main.onmouseover=function(){
stop();
}
main.onmouseout();
for(var i=0;i<dots.length;i++){
dots[i].id=i;
dots[i].onclick = function(){
index = this.id;
changeImg();
}
}
}
function changeImg(){
for(var i=0;i<len;i++){
pics[i].style.display="none";
dots[i].className="";
}
pics[index].style.display="block";
dots[index].className="active";
}
function stop(){
if(timer)
clearInterval(timer);
}
prev.onclick =function(){
index--;
if(index<0)
index=len-1;
changeImg();
}
next.onclick = function(){
index++;
if(index>=len)
index=0;
changeImg();
}
slideImg();
1回答
-
好帮手慕小琪
2020-05-10
同学你好，圆点无显示是因为同学没有遍历圆点及绑定圆点事件，建议同学回顾之前的视频课程，复习如何进行点击圆点切换页面操作。链接如下：
https://class.imooc.com/lesson/1069#mid=25825
老师也将修改后的代码截图粘贴给同学，同学要仔细修改。
如果我的回答解决了你的疑惑，请采纳！祝学习愉快~
0
相似问题