切换页选项的背景颜色发生相应的变化并且图片也切换 这个实现不了，错在哪
6-2 作业
*{
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);
} /*最后出现的优先级最高*/
<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 |
免责声明：本内容仅代表回答会员见解不代表天盟观点，请谨慎对待。
版权声明：作者保留权利，不代表天盟立场。
|
|
|
|
|
|
|
|
|
main.onmouseout();下边的for循环中，len已经是pics.length了，不能再len.length |
|
|
|
|
|
|
|
|
天盟APP下载
