哪里错了 搞不懂。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商场</title>
<link rel="stylesheet" type="text/css" href="lunbo.css">
</head>
<body>
<div class="main" id="main">
<div class="banner" id="banner">
<div class="slide slide1 slide-active">
<a></a>
</div>
<div class="slide slide2">
<a></a>
</div>
<div class="slide slide3">
<a></a>
</div>
</div>
<div>
<a class="button" id="left"></a>
<a class="button" id="right"></a>
</div>
<div class="yuandian" id="yuandian">
<span class="active"></span>
<span class=""></span>
<span class=""></span>
</div>
</div>
<script type="text/javascript" src="lunbo.js"></script>
</body>
</html>
*{
margin:0px;
padding: 0px;
}
.main{
height:460px;
width:1200px;
margin:0px auto;
overflow:hidden;
position:relative;
}
.slide{
height:460px;
width:1200px;
position:absolute;
display:none;
}
.slide1{
background:url("img/bg1.jpg");
}
.slide2{
background:url("img/bg2.jpg");
}
.slide3{
background:url("img/bg3.jpg");
}
.slide-active{
display: block;
}
.button{
background:url("img/arrow.png") no-repeat center center;
position:absolute;
top:50%;
left:280px;
margin-top:-40px;
height:80px;
width:40px;
}
.button:hover{
background-color:#333;
opacity:0.6;
filter:alpha(opacity=80);
}
#left{
transform:rotate(180deg);
}
#right{
left:auto;
right:0;
}
.yuandian{
position:absolute;
right:15px;
bottom:20px;
text-align: right;
}
span{
width: 8px;
height: 8px;
margin-left: 8px;
border-radius: 50%;
display: inline-block;
background: rgba(255, 255, 255,0.8);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
}
.active{
background: rgba(29, 130, 254,0.8);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
}
var main=document.getElementById("main");
var banner=document.getElementById("banner");
var divs=banner.getElementsByTagName("div");
var left=document.getElementById("left");
var right=document.getElementById("right");
var yuandian=document.getElementById("yuandian");
var span=yuandian.getElementsByClassName("span");
var index=0;
var timer=null;
function lunbo() {
main.onmouseover=function(){
//鼠标停留某区域
if(timer)clearInterval(timer);
}
main.onmouseout=function(){
//鼠标划过离开某区域
timer=setInterval(function(){
index++;
if(index==3){
index=0;
}
changeImg();
},3000)
}
main.onmouseout();
left.onclick=function(){
index--;
if(index==-1) {
index = 2;
}
changeImg();
}
right.onclick=function(){
index++;
if(index==3)
{
index=0;
}
changeImg();
}
for(var s=0;s<span.length;s++){ //圆点
span[s].id=s;
span[s].onclick=function(){
index=this.id;
for(var i=0;i<span.length;i++)
{
span[i].className="";
}
this.className="active";
alert(1);
changeImg();
}
}
}
function changeImg(){ //全局index索引改变图片
for(var i=0;i<divs.length;i++)
{
span[i].className='';
divarr[i].style.display='none';
}
divarr[index].style.display='block';
span[index].className="active";
}
lunbo();
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星