有点小问题请教一下老师
HTML
-----------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3-8作业</title>
<link rel="stylesheet" href="../css/rotation.css">
<script src="../script/rotation.js"></script>
</head>
<body>
<div class="whole_menu">
<div class="menu" id="menu">
<div class="sub_menu active" id="sub1"><p>首页</p></div>
<div class="sub_menu" id="sub2"><p>点击看看</p></div>
<div class="sub_menu" id="sub3"><p>会自动的</p></div>
<div class="sub_menu" id="sub4"><p>我的网站</p></div>
</div>
<div class="banner" id="banner">
<div class="banner1" id="banner1"></div>
<div class="banner2" id="banner2"></div>
<div class="banner3" id="banner3"></div>
<div class="banner4" id="banner4"></div>
</div>
</div>
</body>
</html>
CSS
----------------------
*{
padding: 0;
margin: 0;
}
p{
font-size: 22px;
font-family: "Microsoft Yahei";
line-height: 50px;
text-align: center;
}
p:hover{
cursor: pointer;
}
.whole_menu{
width: 1200px;
height: 500px;
margin: 0 auto;
overflow: hidden;
border: 1px dotted #666;
}
.whole_menu .menu{
width: 100%;
height: 50px;
}
.whole_menu .menu .sub_menu{
float: left;
width: 25%;
height: 100%;
}
.whole_menu .menu .active{
background: #ffcc00;
font-size: 26px;
border-radius: 10px 10px;
}
.whole_menu .banner{
width: 100%;
height: 450px;
}
.whole_menu .banner .banner1{
width: 100%;
height: 100%;
background: url("../img/1.jpg") 0 0 no-repeat;
}
.whole_menu .banner .banner2{
width: 100%;
height: 100%;
background: url("../img/3.jpg") 0 0 no-repeat;
}
.whole_menu .banner .banner3{
width: 100%;
height: 100%;
background: url("../img/4.jpg") 0 0 no-repeat;
}
.whole_menu .banner .banner4{
width: 100%;
height: 100%;
background: url("../img/5.jpg") 0 0 no-repeat;
}
.whole_menu .banner:hover{
cursor: pointer;
}
JS
----------------------
window.onload = function(){
var menu = document.getElementById("menu"),
banner = document.getElementById("banner"),
menuNum = menu.children.length,
bannerNum = banner.children.length,
index = 0;
autoPlay();
menu.addEventListener("mouseover",function(){
clearInterval(ban);
})
menu.addEventListener("mouseout",function(){
autoPlay();
})
menu.addEventListener("click",function(event){
for(var i = 0;i < menuNum;i++){
banner.children[i].style.display = "none";
menu.children[i].className = "sub_menu";
}
if(event.target.innerHTML == "首页"){
menu.children[0].className = "sub_menu active";
banner.children[0].style.display = "block";
index = 0;
}
else if(event.target.innerHTML == "点击看看"){
menu.children[1].className = "sub_menu active";
banner.children[1].style.display = "block";
index = 1;
}
else if(event.target.innerHTML == "会自动的"){
menu.children[2].className = "sub_menu active";
banner.children[2].style.display = "block";
index = 2;
}
else{
menu.children[3].className = "sub_menu active";
banner.children[3].style.display = "block";
index = 3;
}
},false);
function autoPlay(){
window.ban = setInterval(function(){
index++;
if(index >= bannerNum){
index = 0;
}
for(var i = 0;i < bannerNum;i++){
banner.children[i].style.display = "none";
menu.children[i].className = "sub_menu";
}
banner.children[index].style.display = "block";
menu.children[index].className = "sub_menu active";
},1000)
}
}
在鼠标点击事件中采用事件冒泡，event.target指的是p标签，我想指向div标签，请问怎么修改
正在回答 回答被采纳积分+1
同学你好，不可以。z-index 属性指定一个元素的堆叠顺序。关于z-index可以参考教辅，有详细的讲解：http://file.mukewang.com/class/assist/190/3661251/z-inde%28教辅%29x.pdf
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星