切换页选项的背景颜色发生相应的变化并且图片也切换 这个实现不了，错在哪里了？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>6-2 作业</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
a:link,a:visited{
text-decoration: none;/*去下划线*/
color: #666;
font-size: 22px;
}
ul{
list-style: none;
}
body{
font-family: "微软雅黑";
color: #666;
cursor: pointer;
}
.clear:after{
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.clear{
zoom:1
}
.main{
width: 1200px;
height: 500px;
margin:30px auto;
overflow: hidden;
}
.menu{
width: 100%;
height:40px;
}
.menu ul{
width: 100%;
height: 40px;
}
.menu ul li{
float: left;
width: 300px;
}
.menu-active{
background-color:#ffcc00;
font-weight:bold;
border: transparent;
border-radius: 10px;
}
.menu ul li a{
display: inline-block;
width: 100%;
margin: 0 auto;
text-align: center;
line-height: 40px;
}
/*图片*/
.banner{
height: 460px;
width: 1200px;
overflow: hidden;
position: relative;
}
.banner-slide{
height: 460px;
width: 1200px;
background-repeat: no-repeat;
position: absolute;
}
.slide-active{
display: block;
}
.slide1{
background-image: url(../img/1.jpg);
}
.slide2{
background-image: url(../img/3.jpg);
}
.slide3{
background-image: url(../img/4.jpg);
}
.slide4{
background-image: url(../img/5.jpg);
} /*最后出现的优先级最高*/
</style>
</head>
<body>
<div id="main">
<!--菜单-->
<div>
<ul id="menu-ul">
<li><a href="">首页</a></li>
<li><a href="">点击看看</a></li>
<li><a href="">会自动的</a></li>
<li><a href="">我的网站</a></li>
</ul>
</div>
<!--图片轮播-->
<div 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>
<a href=""><div class="banner-slide slide4"></div></a>
</div>
</div>
<script>
function byId(id){
return typeof(id)==="string"?document.getElementById(id):id; //检测id类型大小,如果是字符串则取id，不是则返回id
}
//全局变量
var index=0,
banner=byId("banner"),
pics=banner.getElementsByTagName("div"),
len=pics.length,
menuUl=byId("menu-ul"),
menuUlli=menuUl.getElementsByTagName("li"),//每个li 是数组
timer=null;
//图片轮播
function bannerPics(){
var main=byId("main");
main.onmouseout=function(){
timer=setInterval(function(){//设置定时器
index++;
if(index>=len){
index=0;
}
changeImg();
},1000);
};
//滑过清除定时器
main.onmouseover=function(){
if(timer){
clearInterval(timer);
}
};
//自动在banner上自动触发onmouseout事件
main.onmouseout();
//点击li切换图片，遍历所有点击，且绑定事件
for(var n=0;n<len.length;n++){
//给所有的li添加一个id的值，值为n,作为当前n的索引
menuUlli[n].id=n;
//绑定onclick事件
menuUlli[n].onclick=function(){
//改变index为当前li的索引
index=this.id;
//改变class变为menu-active
this.className="menu-active";
changeImg();
}
}
}
//切换图片
function changeImg(){
//遍历banner下所有的div,将其隐藏.遍历ul下的li将其清除
for(var i=0;i<len;i++){
pics[i].style.display="none";
menuUlli[i].className="";
}
//根据index所用找到当前div，将其进行显示。
pics[index].style.display="block";
menuUlli[index].className="menu-active";
}
bannerPics()//调用图片轮播
</script>
</body>
</html>
祀未1回答
-
sherryliu
main.onmouseout();下边的for循环中，len已经是pics.length了，不能再len.length
随时随地看视频慕课网APP
Html/CSS
JavaScript