老师帮忙检查下代码，解答下注释
<html>
<head>
<meta charset="UTF-8">
<title>轮播</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="main-box"></div>
<div class="main-content"></div>
<div class="main-item">
<a href="">
<span>手机、配件</span>
<i></i>
</a>
</div>
<div class="main-item">
<a href="">
<span>电脑</span>
<i></i>
</a>
</div>
<div class="main-item">
<a href="">
<span>家用电器</span>
<i></i>
</a>
</div>
<div class="main-item">
<a href="">
<span>家具</span>
<i></i>
</a>
</div>
<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" id="prev"></a>
<a href="javascript:void(0)" class="button next" id="next"></a>
<div class="dots" id="dots">
<span class="active" ></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;
}
a:link,a:visited{
text-decoration: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;
}
.main-box{
width:244px;
height:460px;
position:absolute;
left:0px;
top:0px;
background:rgba(7,17,27,0.5);
opacity:0.5;
z-index:1;
}
.main-content{
width:244px;
height:454px;
position:absolute;
left:0px;
top:0px;
z-index:2;
padding-top:6px;
}
.main-item{
height:64px;
line-height:66px;
font-size:16px;
padding:0 24px;
}
.main-item a:link, .main-item a:visited{
color:#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 dots=byId("dots").getElementsByTagName("span");
var prev=byId("prev");
var next=byId("next");
var 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();
},1500);
}
main.onmouseout();
for(var d=0;d<len;d++){
dots[d].id=d;
dots[d].onclick=function(){
index=this.id;
changeImg(index);
}
}
}
next.onclick=function{
index++;
console.log(index);
}
prev.onclick=function{
index--;
if(index<0) index=len-1;
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";
}
slideImg();
//我用的是360游览器，灰色导航超出了图片的框
//css最后的
.main-item a:link, .main-item a:visited{
color:#FFF;
}
设置上后导航没显示字体
老师讲课很快
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星