前端网页代码二级菜单，轮播
以下是我写的代码和效果
菜单栏是点哪就跳在哪我想做个二级菜单和图片轮播
请问我该怎么写加在哪呢，（网页初学者马上要交作业了）拜托大神们眷顾了！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生js实现幻灯片</title>
</head>
<style>
.container {
width: 100%;
height: 500px;
position: relative;
}
.content {
width: 900px;
height: 450px;
position: relative;
overflow: hidden;
border: 1px solid seagreen;
margin: 0 auto;
}
.slider-img {
width: 900px;
height: 450px;
margin: 10px auto;
}
.slider-img img {
vertical-align: top;
width: 800px;
height: 400px;
margin: 10px 50px;
display: block;
}
.left {
margin-top: -300px;
margin-left: 50px;
width: 100px;
height: 100px;
}
.left img,
.right img {
width: 100px;
height: 100px;
}
.right {
margin-top: -100px;
margin-right: 50px;
float: right;
width: 100px;
height: 100px;
}
.dot {
position: relative;
top: 23%;
left: 43%;
width: 50%;
}
.dotul {
width: 450px;
}
.dotul li {
width: 20px;
height: 20px;
background-color: seagreen;
list-style: none;
float: left;
border-radius: 20px;
margin-left: 15px;
z-index: 999;
cursor: pointer;
}
.active {
background-color: orangered !important;
}
</style>
<body>
<div class="container" id="contaner">
<div class="content" id="content">
<div class="slider-img" id="slider">
<a href="javascript:;">
<img src="http://music.0cafe.top/uploads/20200530/c78616f447b04c94cf2e3ab967a8d8c4.jpg" alt="1.jpg"
id="img">
</a>
</div>
</div>
<div class="btn">
<div class="left" id="left">
<a href="###"> 左 </a>
</div>
<div class="right" id="right">
<a href=" ###">右</a>
</div>
</div>
<div class="dot">
<ul id="ul" class="dotul">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script>
//首先要获取元素
var container = document.getElementById("container");
var content = document.getElementById("content");
var slider = document.getElementById("slider");
var img = document.getElementById("img");
var ul = document.getElementById("ul");
var li = document.getElementsByTagName("li");
var left = document.getElementById("left");
var right = document.getElementById("right");
var num = 0;
var timer = null;
//图片位置
var arrUrl = ["http://music.0cafe.top/uploads/20200530/c78616f447b04c94cf2e3ab967a8d8c4.jpg", "https://419348.s81i.faiusr.com/2/101/AFEIlMwZEAIYACDw7I3jBSisr7fcBzDuBTjoAkBl.jpg", "http://music.0cafe.top/uploads/20200530/c78616f447b04c94cf2e3ab967a8d8c4.jpg", "https://1066381.s81i.faiusr.com/4/101/AFEIjYtBEAQYACDlup3vBSiyhJZ-MO4FOOgCQGU.png", "https://419348.s81i.faiusr.com/2/101/AFEIlMwZEAIYACDw7I3jBSisr7fcBzDuBTjoAkBl.jpg"];
left.onclick = function (ev) {
num--;
if (num == -1) {
num = arrUrl.length - 1;//如果到了第一张，返回最后一张
}
changeImg();
};
right.onclick = function (ev) {
num++;
if (num == arrUrl.length) {
num = 0;//如果是最后一张，则返回第一张
}
changeImg();
};
//点击小圆点跳转到对应的图片
for (var i = 0; i < arrUrl.length; i++) {
li[i].index = i;
li[i].onclick = function (ev) {
num = this.index;
changeImg();
}
}
setTimeout(autoPlay(), 1000);//延迟1秒执行自动切换
//鼠标移入清除定时器，鼠标移出恢复
content.onmouseover = function (ev) {
clearInterval(timer);
};
content.onmouseout = autoPlay;
//图片切换函数
function changeImg() {
img.src = arrUrl[num];//改变图片src位置
for (var i = 0; i < li.length; i++) {//改变原点样式
li[i].className = "";
}
li[num].className = "active";
}
//设置定时器
function autoPlay() {
timer = setInterval(function () {
num++;
num %= arrUrl.length;
changeImg();
}, 2000);
}
</script>
</body>
</html>
二级菜单，然后给二级的盒子给默认overflow：hidden，鼠标滑入的时候overflow：diaplay就可以
<div class='bq'>
<ul class='one'>
<li>
<a href="">一级标签</a>
</li>
<li>
<a href="">一级标签</a>
<ul class='two'>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
</ul>
</li>
<li>
<a href="">一级标签</a>
</li>
<li>
<a href="">一级标签</a>
</li>
<li>
<a href="">一级标签</a>
</li>
</ul>
</div>