请老师帮我改一下代码。我不知道应该怎么修改才能和老师讲的一样了。 谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合示例</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="main">
<!--图片轮播-->
<div id="picture">
<a href="#">
<div class="picture-1 picture-all picture-active">
</div>
</a>
<a href="#">
<div class="picture-2 picture-all">
</div>
</a>
<a href="#">
<div class="picture-3 picture-all">
</div>
</a>
</div>
<!--轮播箭头-->
<a href="#" class="point" id="point-1"></a>
<a href="#" class="point" id="point-2"></a>
<!--图片切换小圆点-->
<div id="dot">
<span class="active"></span>
<span></span>
<span></span>
</div>
<!--主菜单栏-->
<div class="menu" id="menu">
<div class="menu-title" id="menu-title">
<div class="title"> 手机、配件
<div class="point1"></div>
</div>
<div class="title"> 电脑
<div class="point1"></div>
</div>
<div class="title"> 家用电器
<div class="point1"></div>
</div>
<div class="title"> 家具
<div class="point1"></div>
</div>
</div>
</div>
<!--二级菜单栏-->
<div class="second-menu " id="second-menu">
<div class="sub-inner-box active ">
<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>
<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 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 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 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>
<script src="cssStyle.js">
</script>
</body>
</html>
//JS语言
function byId(id) {
return typeof (id) === "string" ? document.getElementById(id) : id;
}
var index = 0,
time = null,
pic = byId("picture").getElementsByTagName("div"),
num = pic.length,
back = byId("point-1"),
next = byId("point-2"),
dot = byId("dot").getElementsByTagName("span");
function solidIMG() {
var main = byId("main");
//鼠标在屏幕上，计时器停止计时
main.onmouseover = function () {
stopAutoPlay();
};
//鼠标离开屏幕，计时器开始工作
main.onmouseout = function () {
time = setInterval(function () {
index++;
if (index >= num) {
index = 0;
}
checkImg();
}, 3000);
};
//自动触发离开鼠标事件；
main.onmouseout();
//小圆点切换,给所有span标签添加一个id属性，id为i的值。
for (var i = 0, len = dot.length; i < len; i++) {
dot[i].id = i;
dot[i].onclick = function () {
index = this.id;
// 调用切换图片
checkImg();
}
}
//上一张
back.onclick = function () {
index--;
if (index < 0) {
index = 2;
}
checkImg();
};
//下一张
next.onclick = function () {
index++;
if (index >= num) {
index = 0;
}
checkImg();
}
}
//切换图片功能checkIMG
function checkImg() {
for (var i = 0; i < num; i++) {
pic[i].style.display = "none";
dot[i].className = " ";
}
pic[index].style.display = "block";
dot[index].className = " active";
}
//清除时间
function stopAutoPlay() {
if (time) {
clearInterval(time);
}
var title = byId("menu-title").getElementsByClassName("title"),
menu = byId("menu"),
second = byId("second-menu"),
secondBox = byId("second-menu").getElementsByClassName("sub-inner-box");
for (var m = 0; m < title.length; m++) {
title[m].setAttribute("data-index", m);
title[m].onmouseover = function () {
secondBox.className = "sub-inner-box";
var idx = this.getAttribute("data-index");
for (var j = 0, jlen = secondBox.length; j < jlen; j++) {
secondBox[j].className = 'sub-inner-box';
title[j].style.background = "none";
}
secondBox[idx].className="sub-inner-box active";
title[idx].style.background = "rgba(0,0,0,0.1)";
}
}
menu.onmouseover = function () {
second.className = "second-menu";
}
menu.onmouseout = function () {
second.className = "second-menu hide";
}
second.onmouseover = function () {
second.className = "second-menu";
}
second.onmouseout = function () {
second.className = "second-menu hide";
}
}
solidIMG();
//CSS语言
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
@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#iconfont') format('svg');
}
body {
font-family: "Microsoft YaHei UI", serif;
color: #14191e;
}
#main {
width: 1200px;
height: 460px;
margin: 30px auto;
position: relative;
}
#picture {
position: relative;
}
.picture-all {
height: 460px;
width: 1200px;
position: absolute;
display: none;
cursor: auto;
}
.picture-1 {
background-image: url("img/bg1.jpg");
}
.picture-2 {
background-image: url("img/bg2.jpg");
}
.picture-3 {
background-image: url("img/bg3.jpg");
}
.picture-active {
display: block;
}
/* 轮播按钮*/
.point {
position: absolute;
left: 244px;
top: 50%;
margin-top: -40px;
background: url("img/arrow.png") no-repeat center center;
height: 80px;
width: 40px;
}
.point:hover {
background-color: black;
opacity: 0.4;
}
#point-1 {
transform: rotate(180deg);
}
#point-2 {
left: auto;
right: 0;
}
/* 轮播小圆点*/
#dot {
position: absolute;
right: 18px;
bottom: 20px;
}
#dot span {
height: 12px;
width: 12px;
border-radius: 6px;
display: inline-block;
background-color: rgba(7, 17, 27, 0.4);
margin-left: 12px;
cursor: pointer;
box-shadow: 0 0 0 2px inset rgba(255, 255, 255, 0.8);
}
#dot .active {
background-color: #fff;
box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
}
/* 主菜单*/
.menu {
height: 460px;
width: 244px;
background-color: rgba(7, 17, 27, 0.2);
position: absolute;
left: 0;
top: 0;
}
.menu-title {
position: absolute;
top: 20px;
left: 10px;
}
.menu-title .title {
color: white;
width: 224px;
font-size: 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
line-height: 60px;
cursor: pointer;
position: relative;
left: 10px;
}
.menu-title .title .point1 {
font-family: "iconfont";
position: absolute;
top: 0;
right: 20px;
}
/* 二级菜单*/
.second-menu {
position: absolute;
left: 244px;
top: 0;
width: 732px;
height: 460px;
z-index: 3;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3) inset;
background: url("img/fe.png") no-repeat ;
}
.sub-inner-box {
width: 652px;
margin-left: 40px;
display: none;
}
.active{
display: block;
}
.sub-inner-box .title {
color: #f01414;
font-size: 16px;
line-height: 16px;
margin-top: 28px;
font-weight: bold;
margin-bottom: 30px;
}
.sub-row {
margin-bottom: 25px;
}
.sub-row a {
text-decoration: none;
color: #14191e;
}
.bold {
font-weight: 700;
}
.mr10 {
margin-right: 10px;
}
.ml10 {
margin-left: 10px;
}
.hide{
display: none;
}
正在回答
同学的代码完成的不错，另外同学想问什么呢？请同学具体描述。如果和老师的不一样，同学可以下载一下老师的代码，对比一下。祝：学习愉快~
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 1088 份
- 解答问题 10205 个
如果你有Java语言基础，又想以后从事Java Web开发，那么本路径是你的不二选择！本路径从网页搭建开始入手，通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星