老师，按钮下一张，上一张无法切换图？还有子菜单背景不显示？怎么回事啊？
1 | 下一张，上一张无法切换图？子菜单背景不显示？ |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript轮播图</title>
<link rel="stylesheet" type="text/css" href="css/CSS.css">
</head>
<body>
<div class="main" id="main">
<div class="menu-box"></div>
<!--子菜单-->
<div class="sub-menu">
<div class="inner-box">
<div class="sub-inner-box">
<div class="title">手机、配件</div>
<div class="sub-row">
<span class="bold mr10">手机通讯：</span>
<a href="">手机</a>
<span class="ml10 mr10">/</span>
<a href="">手机维修</a>
<span class="ml10 mr10">/</span>
<a href="">以旧换新</a>
</div>
</div>
</div>
</div>
<!--主菜单-->
<div class="menu-content">
<div class="menu-item">
<a href="">
<span>手机、配件</span>
<i class="icon"></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>电脑</span>
<i class="icon"></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>家用电器</span>
<i class="icon"></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>家具</span>
<i class="icon"></i>
</a>
</div>
</div>
<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=""><button class="prev" id="prev"><img src="img/arrow.png"></button></a>
<a href=""><button class="next" id="next"><img src="img/arrow.png"></button></a>
<div class="dots" id="dots">
<span class="active"></span>
<span class=""></span>
<span class=""></span>
</div>
</div>
<script src="JS/index.js"></script>
</body>
</html>
*{
margin:0px;
padding:0px;
}
ul{
list-style: none;
}
.main{
width:1200px;
height:460px;
border:0px solid red;
margin:30px auto;
overflow: hidden;
position: relative;
}
.banner{
width:1200px;
height:460px;
}
.banner-slide{
width:1200px;
height:460px;
position: absolute;
top:0px;
left:0px;
display:none;
}
.slide-active{
display:block;
}
.slide1{
background: url(../img/bg1.jpg);
}
.slide2{
background: url(../img/bg2.jpg);
}
.slide3{
background: url(../img/bg3.jpg);
}
.prev{
width:40px;
height:80px;
position:absolute;
left:244px;
top:50%;
margin-top:-40px;
border-style: none;
transform:rotate(180deg);
}
.next{
width:40px;
height:80px;
position:absolute;
right:0px;
top:50%;
margin-top:-40px;
border-style: none;
}
button:hover{
background-color: black;
opacity: 0.5;
}
.dots{
position:absolute;
right:20px;
bottom: 24px;
}
.dots span{
width:12px;
height:12px;
border-radius: 50%;
background-color: rgba(7, 17, 27, 0.4);
display: inline-block;
margin: 5px;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
}
.dots span.active{
box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
background-color: #ffffff;
}
.menu-box{
width:244px;
height:454px;
background: rgba(7,17,27,0.4);
position: absolute;
border:0px solid 1px;
top:0px;
left: 0px;
z-index: 1;
padding-top: 6px;
}
.menu-content{
width:244px;
height:454px;
position: absolute;
border:0px solid 1px;
top:0px;
left: 0px;
z-index: 2;
padding-top: 6px;
}
a:link,a:visited{
text-decoration: none;
color:#333;
}
.menu-item{
height: 64px;
line-height: 66px;
padding:0px 24px;
border:0px solid red;
}
.menu-item>a{
color:#fff;
border:0px solid red;
/*为什么加上display:block之后效果实现了*/
display:block;
border-bottom: 1px solid rgba(255,255,255,0.2);
padding:0px 8px;
}
@font-face {font-family: 'iconfont';
src: url('../img/font/iconfont.eot');
src: url('../img/font/iconfont.eot') format('embedded-opentype'),
url('../img/font/iconfont.woff') format('woff'),
url('../img/font/iconfont.ttf') format('truetype'),
url('../img/font/iconfont.svg#iconfont') format('svg');
}
.sub-menu{
width:730px;
height:458px;
border:1px solid #fff;
position: absolute;
left:244px;
top:0px;
background: #fff;
z-index: 555;
box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
overflow: hidden;
}
}
.inner-box{
width:100%;
height:100%;
background: url(../img/fe.png);
z-index: 999;
}
.sub-inner-box{
margin:0px 40px;
}
.title{
margin:30px 0px;
font-weight: bold;
color:red;
}
.bto{
font-weight: bold;
margin: 10px;
}
.mr10{
margin: 10px;
}
.sub-row{
margin: 20px 0px;
}
//封装一个document.getElementById
function byId(id){
return typeof(id) === "string"?document.getElementById(id):id;
}
var index=0,
timer=null,
pics=byId("banner").getElementsByTagName("div"),
dots=byId("dots").getElementsByTagName("span"),
prev=byId("prev"),
next=byId("next"),
len=pics.length;
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();
},3000)
}
//自动触发轮播图。添加一个onmouseout方法
main.onmouseout();
//遍历所有的圆点，绑定点击事件，点击小圆点，调到第几张图片
for(var d=0;d<len;d++){
//给span添加一个id属性，值为d，做为当前索引
dots[d].id=d;
dots[d].onclick=function(){
index=this.id;
//这里需要调用changeImg函数，切换图片
changeImg();
}
}
//下一张
next.onclick=function(){
index++
if(index >= len) index=0;
changeImg();
}
//上一张
prev.onclick=function(){
index--
if(index<0) index=len-1;
changeImg();
}
}
//切换图片需要多次调用，所以需要封装一个函数切换图片
function changeImg(){
//遍历banner下的div及dots下的span，将其清楚
for(var i=0;i<len;i++){
pics[i].style.display="none";
dots[i].className="";
}
//根据index找到当前div的位置，将它显示出来
pics[index].style.display="block";
dots[index].className="active";
}
slideImg();
正在回答
因为这个位置多了一个结束的花括号，导致了后面的样式不生效
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星