导航菜单鼠标移出一直有黑色背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合实例</title>
<link type="text/css" rel="styleSheet" href="css/css.css" />
</head>
<body>
<div class="main" id="main">
<div class="menu-box"></div><!--导航栏设置透明度，在里面写东西也会透明，另起div-->
<!--主菜单-->
<div class="menu-content" id="menu-content">
<div class="menu-item">
<a href="">
<span>手机、配件</span>
<i></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>电脑</span>
<i></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>家用电器</span>
<i></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>家具</span>
<i></i>
</a>
</div>
</div>
<!--子菜单-->
<div class="sub-menu hide" id="sub-menu">
<!--手机、配件-->
<div class="inner-box">
<div class="sub-inner-box">
<!--标题-->
<div class="title">手机、配件</div>
<div class="sub-row">
<span class="bold mr10">手机通讯：</span>
<a href="">手机</a>
<span class="mr10 ml10">/</span>
<a href="">手机维修</a>
<span class="mr10 ml10">/</span>
<a href="">以旧换新</a>
</div>
<div class="sub-row">
<span class="bold mr10">手机配件：</span>
<a href="">手机壳</a>
<span class="ml10 mr10">/</span>
<a href="">手机存储卡</a>
<span class="ml10 mr10">/</span>
<a href="">数据线</a>
<span class="ml10 mr10">/</span>
<a href="">充电器</a>
<span class="ml10 mr10">/</span>
<a href="">电池</a>
</div>
<div class="sub-row">
<span class="bold mr10">运营商：</span>
<a href="">中国联通</a>
<span class="ml10 mr10">/</span>
<a href="">中国移动</a>
<span class="ml10 mr10">/</span>
<a href="">中国电信</a>
</div>
<div class="sub-row">
<span class="bold mr10">智能设备：</span>
<a href="">智能手环</a>
<span class="ml10 mr10">/</span>
<a href="">智能家居</a>
<span class="ml10 mr10">/</span>
<a href="">智能手表</a>
<span class="ml10 mr10">/</span>
<a href="">其他配件</a>
</div>
<div class="sub-row">
<span class="bold mr10">娱乐：</span>
<a href="">耳机</a>
<span class="ml10 mr10">/</span>
<a href="">音响</a>
<span class="ml10 mr10">/</span>
<a href="">收音机</a>
<span class="ml10 mr10">/</span>
<a href="">麦克风</a>
</div>
</div>
</div>
<!--电脑-->
<div class="inner-box">
<div class="sub-inner-box">
<div class="title">电脑</div>
<div class="sub-row">
<span class="bold mr10">电脑：</span>
<a href="">笔记本</a>
<span class="ml10 mr10">/</span>
<a href="">平板</a>
<span class="ml10 mr10">/</span>
<a href="">一体机</a>
</div>
<div class="sub-row">
<span class="bold mr10">电脑配件：</span>
<a href="">显示器</a>
<span class="ml10 mr10">/</span>
<a href="">CPU</a>
<span class="ml10 mr10">/</span>
<a href="">主板</a>
<span class="ml10 mr10">/</span>
<a href="">硬盘</a>
<span class="ml10 mr10">/</span>
<a href="">电源</a>
<span class="ml10 mr10">/</span>
<a href="">显卡</a>
<span class="ml10 mr10">/</span>
<a href="">其他配件</a>
</div>
<div class="sub-row">
<span class="bold mr10">游戏设备：</span>
<a href="">游戏机</a>
<span class="ml10 mr10">/</span>
<a href="">耳机</a>
<span class="ml10 mr10">/</span>
<a href="">游戏软件</a>
</div>
<div class="sub-row">
<span class="bold mr10">网络产品：</span>
<a href="">路由器</a>
<span class="ml10 mr10">/</span>
<a href="">网络机顶盒</a>
<span class="ml10 mr10">/</span>
<a href="">交换机</a>
<span class="ml10 mr10">/</span>
<a href="">存储卡</a>
<span class="ml10 mr10">/</span>
<a href="">网卡</a>
</div>
<div class="sub-row">
<span class="bold mr10">外部产品：</span>
<a href="">鼠标</a>
<span class="ml10 mr10">/</span>
<a href="">键盘</a>
<span class="ml10 mr10">/</span>
<a href="">U盘</a>
<span class="ml10 mr10">/</span>
<a href="">移动硬盘</a>
<span class="ml10 mr10">/</span>
<a href="">鼠标垫</a>
<span class="ml10 mr10">/</span>
<a href="">电脑清洁</a>
</div>
</div>
</div>
<!--家用电器-->
<div class="inner-box">
<div class="sub-inner-box">
<div class="title">家用电器</div>
<div class="sub-row">
<span class="bold mr10">电视：</span>
<a href="">国产品牌</a>
<span class="ml10 mr10">/</span>
<a href="">韩国品牌</a>
<span class="ml10 mr10">/</span>
<a href="">欧美品牌</a>
</div>
<div class="sub-row">
<span class="bold mr10">空调：</span>
<a href="">显示器</a>
<span class="ml10 mr10">/</span>
<a href="">柜式</a>
<span class="ml10 mr10">/</span>
<a href="">中央</a>
<span class="ml10 mr10">/</span>
<a href="">壁挂式</a>
</div>
<div class="sub-row">
<span class="bold mr10">冰箱：</span>
<a href="">多门</a>
<span class="ml10 mr10">/</span>
<a href="">对开门</a>
<span class="ml10 mr10">/</span>
<a href="">三门</a>
<span class="ml10 mr10">/</span>
<a href="">双门</a>
</div>
<div class="sub-row">
<span class="bold mr10">洗衣机：</span>
<a href="">滚筒式洗衣机</a>
<span class="ml10 mr10">/</span>
<a href="">迷你洗衣机</a>
<span class="ml10 mr10">/</span>
<a href="">洗烘一体机</a>
</div>
<div class="sub-row">
<span class="bold mr10">厨房电器：</span>
<a href="">油烟机</a>
<span class="ml10 mr10">/</span>
<a href="">洗碗机</a>
<span class="ml10 mr10">/</span>
<a href="">燃气灶</a>
</div>
</div>
</div>
<!--家具-->
<div class="inner-box">
<div class="sub-inner-box">
<div class="title">家具</div>
<div class="sub-row">
<span class="bold mr10">家纺：</span>
<a href="">被子</a>
<span class="ml10 mr10">/</span>
<a href="">枕头</a>
<span class="ml10 mr10">/</span>
<a href="">四件套</a>
<span class="ml10 mr10">/</span>
<a href="">床垫</a>
</div>
<div class="sub-row">
<span class="bold mr10">灯具：</span>
<a href="">台灯</a>
<span class="ml10 mr10">/</span>
<a href="">顶灯</a>
<span class="ml10 mr10">/</span>
<a href="">节能灯</a>
<span class="ml10 mr10">/</span>
<a href="">应急灯</a>
</div>
<div class="sub-row">
<span class="bold mr10">厨具：</span>
<a href="">烹饪锅具</a>
<span class="ml10 mr10">/</span>
<a href="">餐具</a>
<span class="ml10 mr10">/</span>
<a href="">菜板刀具</a>
</div>
<div class="sub-row">
<span class="bold mr10">家装：</span>
<a href="">地毯</a>
<span class="ml10 mr10">/</span>
<a href="">沙发垫套</a>
<span class="ml10 mr10">/</span>
<a href="">装饰字画</a>
<span class="ml10 mr10">/</span>
<a href="">照片墙</a>
<span class="ml10 mr10">/</span>
<a href="">窗帘</a>
</div>
<div class="sub-row">
<span class="bold mr10">生活日用：</span>
<a href="">收纳用品</a>
<span class="ml10 mr10">/</span>
<a href="">浴室用品</a>
<span class="ml10 mr10">/</span>
<a href="">雨伞雨衣</a>
</div>
</div>
</div>
</div>
<!--图片轮播-->
<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> // href意思是a是不做任何超链接跳转
<a href="JavaScript:void(0)" class="button next" id="next"></a> // href意思是a是不做任何超链接跳转
<!--圆点导航-->
<div class="dots" id="dots">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
<script src="js/js.js"></script>
</body>
</html>
/*通用设置*/
* {
margin: 0;
padding: 0;
}
body {
font-family: "微软雅黑";
color: #14191e;
background: #000000;
}
a:link,a:visited {
text-decoration: none;
color: #333;
}
@font-face {
font-family: "iconfont";
src: url("../img/font/iconfont.eot");
src: url("../img/font/iconfont.eot") format("embedded-opentype"),
url("../img/font/iconfont.woff") format("woff"),
url("../img/font/iconfont.ttf") format("truetype"),
url("../img/font/iconfont.svg#iconfog") format("svg");
}
ul {
list-style: none;
}
/*大父级框*/
.main {
width: 1200px;
height: 460px;
margin: 30px auto;
overflow: hidden;
position: relative;
}
/*轮播图图片框*/
.banner {
width: 1200px;
height: 460px;
position: relative;
}
.banner-slide {
width: 1200px;
height: 460px;
background-repeat: no-repeat;
position: absolute;
display: none;
}
/*显示第一张图片*/
.slide-active {
display: block;
}
/*插入背景图片*/
.slide1 {
background-image: url("../img/bg1.jpg");
}
.slide2 {
background-image: url("../img/bg2.jpg");
}
.slide3 {
background-image: url("../img/bg3.jpg");
}
/*左右按钮区域*/
.button {
position: absolute;
width: 40px;
height: 80px;
left: 244px;
top: 50%;
margin-top: -40px;
background: url("../img/arrow.png") no-repeat center center;
}
.button:hover {
background-color: #333;
opacity: 0.3; /*透明度*/
filter: alpha(opacity = 80); /*浏览器兼容*/
}
.prev {
transform: rotate(180deg); /*deg是度数的意思;*/
}
.next {
left: auto;
right: 0;
}
/*圆点导航*/
.dots {
position: absolute;
right: 40px;
bottom: 24px;
text-align: right;
}
.dots span {
display: inline-block;
width: 12px;
height: 12px;
line-height: 12px;
border-radius: 50%;
background-color: rgba(17,17,27,0.4);
box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset; /*阴影的水平方向、阴影的垂直方向、阴影的距离、模糊程度、阴影的颜色、内置阴影*/
margin-left: 8px;
cursor: pointer;
}
/*第一个小圆点、当前小圆点*/
.dots .active {
box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
background: #fff;
}
/*导航栏*/
/*大透明框*/
.menu-box {
width: 244px;
height: 460px;
position: absolute;
left: 0;
top: 0;
background: rgba(7, 17, 27, 0.5);
opacity: 0.5;
z-index: 1;
}
/*文字部分大div*/
.menu-content {
width: 244px;
height: 454px;
position: absolute;
left: 0;
top: 0;
z-index: 2;
padding-top: 6px;
}
/*每一行文字部分*/
.menu-item {
height: 64px;
line-height: 66px;
font-size: 16px;
padding: 0 24px;
position: relative;
}
.menu-item a:link,.menu-item a:visited {
color: #fff;
}
.menu-item a {
display: block;
border-bottom: 1px solid rgba(255,255,255,0.2);
padding: 0 8px;
height: 63px;
}
/*小图标*/
.menu-item i {
position: absolute;
right: 32px;
font-size: 24px;
top: 0;
font-family: "iconfont";
font-style: normal; /*i标签有自动倾斜（取消倾斜）*/
font-weight: normal; /*i标签有自动倾斜（取消倾斜）*/
color: rgba(255,255,255,0.5);
}
/*子菜单*/
/*子菜单父盒子*/
.sub-menu {
width: 730px;
height: 460px;
border: 1px solid #d9dde1;
background: #fff;
position: absolute;
left: 244px;
top: 0;
z-index: 999;
/*阴影 水平方向 垂直方向 阴影的距离 模糊度 颜色*/
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
}
/*子菜单子盒子*/
/*手机、配件*/
.inner-box {
width: 100%;
height: 100%;
background: url("../img/fe.png");
display: none;
}
.sub-inner-box {
width: 652px;
margin-left: 40px;
overflow: hidden;
}
/*标题*/
.title {
color: #f01414;
font-size: 16px;
line-height: 16px;
margin: 28px 0 30px 0;
font-weight: bold;
}
.sub-row {
margin-bottom: 25px;
}
.bold {
font-weight: bold;
}
.mr10 {
margin-right: 10px;
}
.ml10 {
margin-left: 10px;
}
/*隐藏子菜单*/
.hide {
display: none;
}// 封装一个代替getElementById()的方法
function byId(id) {
// tupeof判断id是否为字符串，用三目运算返回
return typeof(id) === "string"?document.getElementById(id):id;
}
// 设置一全局变量来获取当前的图片位置
var index = 0,
timer = null,
pics = byId("banner").getElementsByTagName("div"), // 把这几个div放到数组当中
dots = byId("dots").getElementsByTagName("span"), // 小圆点
prev = byId("prev"),
next = byId("next"),
len = pics.length,
menu = byId("menu-content"),
subMenu = byId("sub-menu"),
innerBox = subMenu.getElementsByClassName("inner-box"),
menuItems = menu.getElementsByClassName("menu-item");
function slideImg() {
var main = byId("main");
// 划过清除定时器，离开继续
main.onmouseover = function () {
// 划过清除定时器
if (timer) clearInterval(timer);
};
// 划入一下开起切换
main.onmouseout = function () {
// setTimeout()超市定时器
timer = setInterval(function () {
index++; // 必须在第一行，在后面判断
if (index >= len) {
index = 0;
}
// 切换图片
changeImg();
}, 3000);
};
// 自动在main上触发鼠标离开的事件
main.onmouseout();
// 遍历所有点击，且绑定点击事件，点击圆点切换图片
for (var d = 0; d < len; d++) {
// 给所有span添加一个id的属性，值为d，作为当前的span的索引
dots[d].id = d;
dots[d].onclick = function () {
// 改变index为当前span的id值
// alert(this.id); // 弹出当前id
index = this.id;
// 调用changeImg，实现切换图图片
changeImg();
}
}
// 下一张
next.onclick = function () {
index++;
if (index >= len) {
index = 0;
}
changeImg();
}
// 上一张
prev.onclick = function () {
index--;
if (index < 0) {
// 当index下标是第一张0的时候--进入判断，len长度-1是最后一张下标
index = len-1;
}
changeImg();
}
// 导航菜单
// 遍历主菜单，且绑定时间
for (var m=0;m<menuItems.length;m++) {
// 没每一个menu-item定义data-index属性，作为索引
menuItems[m].setAttribute("data-index",m);
menuItems[m].onmouseover = function () {
subMenu.className = "sub-menu";
var idx = this.getAttribute("data-index");
// 遍历所有子菜单，将每一个都隐藏
for (var j=0;j<innerBox.length;j++) {
innerBox[j].style.display = 'none';
menuItems[j].style.background = 'none';
}
menuItems[idx].style.background = 'rgba(0,0,0,0.1)';
innerBox[idx].style.display = 'block';
}
}
menu.onmouseout = function () {
subMenu.className = "sub-menu hide";
};
subMenu.onmouseover = function () {
this.className = "sub-menu";
};
subMenu.onmouseout = function () {
this.className = "sub-menu hide";
}
}
// 切换图片
function changeImg() {
// 遍历banner下多有的div，将其隐藏
// 遍历dots下所有的span，将div隐藏，将span清除类
for (var i = 0; i < len; i++){
pics[i].style.display = "none";
dots[i].className = "";
}
// 根据index索引找到当前div，将其显示出来设为当前
pics[index].style.display = 'block';
// 根据index索引找到当前span，将其显示出来设为当前
dots[index].className = "active";
}
slideImg();
0
收起
正在回答
2回答
你好同学，测试了你的代码，按照之前老师的回复，是可以达到你所描述的效果的，
js中的代码如下，你可以将js中的全部代码粘贴到你的编译器中试试。如果有问题还可以继续提问哦，祝学习愉快~
// 封装一个代替getElementById()的方法
function byId(id) {
// tupeof判断id是否为字符串，用三目运算返回
return typeof(id) === "string"?document.getElementById(id):id;
}
// 设置一全局变量来获取当前的图片位置
var index = 0,
timer = null,
pics = byId("banner").getElementsByTagName("div"), // 把这几个div放到数组当中
dots = byId("dots").getElementsByTagName("span"), // 小圆点
prev = byId("prev"),
next = byId("next"),
len = pics.length,
menu = byId("menu-content"),
subMenu = byId("sub-menu"),
innerBox = subMenu.getElementsByClassName("inner-box"),
menuItems = menu.getElementsByClassName("menu-item");
function slideImg() {
var main = byId("main");
// 划过清除定时器，离开继续
main.onmouseover = function () {
// 划过清除定时器
if (timer) clearInterval(timer);
};
// 划入一下开起切换
main.onmouseout = function () {
// setTimeout()超市定时器
timer = setInterval(function () {
index++; // 必须在第一行，在后面判断
if (index >= len) {
index = 0;
}
// 切换图片
changeImg();
}, 3000);
};
// 自动在main上触发鼠标离开的事件
main.onmouseout();
// 遍历所有点击，且绑定点击事件，点击圆点切换图片
for (var d = 0; d < len; d++) {
// 给所有span添加一个id的属性，值为d，作为当前的span的索引
dots[d].id = d;
dots[d].onclick = function () {
// 改变index为当前span的id值
// alert(this.id); // 弹出当前id
index = this.id;
// 调用changeImg，实现切换图图片
changeImg();
}
}
// 下一张
next.onclick = function () {
index++;
if (index >= len) {
index = 0;
}
changeImg();
}
// 上一张
prev.onclick = function () {
index--;
if (index < 0) {
// 当index下标是第一张0的时候--进入判断，len长度-1是最后一张下标
index = len-1;
}
changeImg();
}
// 导航菜单
// 遍历主菜单，且绑定时间
for (var m=0;m<menuItems.length;m++) {
// 没每一个menu-item定义data-index属性，作为索引
menuItems[m].setAttribute("data-index",m);
menuItems[m].onmouseover = function () {
subMenu.className = "sub-menu";
var idx = this.getAttribute("data-index");
// 遍历所有子菜单，将每一个都隐藏
for (var j=0;j<innerBox.length;j++) {
innerBox[j].style.display = 'none';
menuItems[j].style.background = 'none';
}
menuItems[idx].style.background = 'rgba(0,0,0,0.1)';
innerBox[idx].style.display = 'block';
}
}
// menu.onmouseout = function () {
// subMenu.className = "sub-menu hide";
// };
menu.onmouseout = function () {
subMenu.className = "sub-menu hide";
for(var m=0;m<menuItems.length;m++){
menuItems[m].style.background = 'none';
}
};
subMenu.onmouseover = function () {
this.className = "sub-menu";
};
subMenu.onmouseout = function () {
this.className = "sub-menu hide";
}
}
// 切换图片
function changeImg() {
// 遍历banner下多有的div，将其隐藏
// 遍历dots下所有的span，将div隐藏，将span清除类
for (var i = 0; i < len; i++){
pics[i].style.display = "none";
dots[i].className = "";
}
// 根据index索引找到当前div，将其显示出来设为当前
pics[index].style.display = 'block';
// 根据index索引找到当前span，将其显示出来设为当前
dots[index].className = "active";
}
slideImg();
从网页搭建入门Java Web2018版
- 参与学习 人
- 提交作业 1088 份
- 解答问题 10204 个
如果你有Java语言基础，又想以后从事Java Web开发，那么本路径是你的不二选择！本路径从网页搭建开始入手，通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星