为轮播图右下角添加圆点，实现图动，对应圆点颜色变
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>liaodong</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.nav-container {
background: #01478f;
}
.nav {
display: flex;
/**弹性布局*/
}
.nav li {
padding: 20px 0;
flex: 1;
font-size: 16px;
text-align: center;
/***行内或者行内块***/
/* font-weight: 100; */
}
.wrap {
width: 86%;
margin: 0 auto;
/**块元素的剧中**/
}
.nav li h3 {
font-weight: 100;
}
.nav a {
color: #fff;
}
.nav li:hover .sub {
/* display: block;
*/
height: 360px;
}
.nav li {
position: relative;
/****/
}
.nav .sub {
position: absolute;
left: 0;
top: 66px;
width: 100%;
/* height: 300px; */
background: rgba(0, 0, 0, .5);
/* display: none; */
height: 0;
/***元素隐藏**/
transition: .5s;
overflow: hidden;
/* background: red; */
z-index: 222;
/****处理益处部分**/
}
#banner {
position:relative;
}
#banner img {
left: 0;
top: 0;
position: absolute;
width: 100%;
height: 240px;
}
.page {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
height: 50px;
align-items: center;
/***垂直对齐方式**/
justify-content: right;
/***水平对齐方式**/
}
.page div {
width: 15px;
height: 15px;
background: #fff;
margin: 0 10px;
border-radius: 100%;
}
.page div:active {
background: green;
}
/***子代选择**/
.section>div {
min-height: 200px;
/* border: 1px solid red; */
}
.section {
margin-top: 300px;
display: flex;
justify-content: space-between;
}
.section .left {
width: 55%;
justify-content: space-between;
}
.section .left-wrap {
display: flex;
}
.section .right {
width: 40%;
}
.title {
border-top: 3px solid #01478f;
padding: 4px 7px;
color: #01478f;
font-size: 18px;
letter-spacing: 2px;
}
.section .left-wrap div {
width: 48%
}
.section .left .left-wrap p {
/* text-indent: 20px; */
padding: 0 8px;
color: #999;
line-height: 24px;
}
.section .left-wrap img {
width: 100%
}
.right-title {
display: flex;
justify-content: space-between;
}
.right-title a {
color: #aaa;
}
.list li {
padding: 13px;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #aaaa;
}
.list li span {
color: #01478f;
}
.list li a {
color: #333;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block;
/***必须是块元素***/
width: 70%;
/* background: red; */
}
.icon span {
text-align: center;
line-height: 30px;
width: 60px;
height: 30px;
display: block;
border: 1px solid #01478f;
letter-spacing: 1px;
color: #676767;
}
/***spn.bg 并且***/
.icon span.bg {
background: #01478f;
color: #fff;
font-weight: bold;
}
.left-list {
width: 50%;
display: flex;
padding: 10px;
box-sizing: border-box;
/***布局特别好用 --- 怪异盒模型***/
}
.left-list p {
padding: 0 5px;
/****内边距**/
color: #01478f;
}
.left-list-wrap {
flex-wrap: wrap;
/***必须让他们换行***/
display: flex;
}
</style>
</head>
<body>
<div class="nav-container">
<UL class="nav wrap">
<li class="m">
<h3><a href="xxgk/xxjj1.htm" target="_blank" title="学校概况">学校概况</a></h3>
</li>
<li class="m">
<h3><a href="http://www.liaodongu.edu.cn/xww" target="_blank" title="新闻网">新闻网</a></h3>
</li>
<li class="m">
<h3><a href="index.htm" title="机构设置">机构设置</a></h3><i></i>
</li>
<li class="m">
<h3><a href="#" title="人才培养">人才培养</a></h3><i></i>
<ul class="sub">
<li><a href="http://www.liaodongu.edu.cn/rsc" target="_blank" title="师资队伍">师资队伍</a></li>
<li><a href="http://www.liaodongu.edu.cn/jxw" target="_blank" title="教育教学">教育教学</a></li>
<li><a href="http://sc.ldxy.cn" target="_blank" title="创新创业">创新创业</a></li>
<li><a href="http://www.liaodongu.edu.cn/jxpj" target="_blank" title="质量保障">质量保障</a></li>
<li><a href="http://www.liaodongu.edu.cn/gjjyxy" target="_blank" title="国际教育">国际教育</a></li>
<li><a href="http://www.liaodongu.edu.cn/jxjy" target="_blank" title="继续教育">继续教育</a></li>
</ul>
</li>
<li class="m">
<h3><a href="index.htm" title="科学研究">科学研究</a></h3><i></i>
<ul class="sub">
<li><a href="http://www.liaodongu.edu.cn/keyan" target="_blank" title="科研管理">科研管理</a></li>
<li><a href="https://xuebao.liaodongu.edu.cn/" target="_blank" title="学术期刊">学术期刊</a></li>
</ul>
</li>
<li class="m">
<h3><a href="index.htm" target="_blank" title="招生就业">招生就业</a></h3><i></i>
<ul class="sub">
<li><a href="https://zsw.elnu.edu.cn" target="_blank" title="招生网">招生网</a></li>
<li><a href="https://jyw.elnu.edu.cn/#/" target="_blank" title="就业网">就业网</a></li>
</ul>
</li>
<li class="m">
<h3><a href="index.htm" target="_blank" title="合作交流">合作交流</a></h3><i></i>
<ul class="sub">
<li><a href="http://www.liaodongu.edu.cn/shhz" target="_blank" title="社会合作">社会合作</a></li>
</ul>
</li>
</UL>
</div>
<div id="banner">
<img src="https://www.liaodongu.edu.cn/images/fushijieanquanshengchanyujiankangrijierixuanchuangongzhonghaoshoutu.jpg"
alt="">
<div class="page">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<script>
var imgs=[
'https://www.liaodongu.edu.cn/images/zhaoshengzhangcheng.jpg',
'https://www.liaodongu.edu.cn/images/duanwuankangzhufutuanyuanshijinggongzhonghaoshoutu.jpg',
'https://www.liaodongu.edu.cn/images/fushijieanquanshengchanyujiankangrijierixuanchuangongzhonghaoshoutu.jpg',
'https://www.liaodongu.edu.cn/images/gaodingsheji-3.jpg'
]
//第一部分
var strImg='';
for(var i=0;i<imgs.length;i++){
strImg+=`<img src="${imgs[i]}"/>`
}
var banner=document.querySelector("#banner")
banner.innerHTML=strImg;
//显示的图片，其他隐藏
var index=0;
// allPage[index].style.backgroundColor='white'
function showImg(){
//所有图片都隐藏
var imgs=document.querySelectorAll("#banner img");
for(var i=0;i<imgs.length;i++){
imgs[i].style.display="none";//隐藏
}
imgs[index].style.display='block'//显示
}
showImg()
//计时器
setInterval(function(){
index+=1;
showImg()
if(index==imgs.length-1){
index=0;
}
// console.log("zz");
},3000)
</script>
<div class="section">
<div class="left">
<div class="left-wrap">
<div onmouseover="x1(this)"onmouseout="x2(this)">
<img src="https://www.liaodongu.edu.cn/__local/3/C9/9A/528FE5A0EC53971DE36B5C548D6_1F486B9E_5E0A5.jpg"
alt="">
<p>辽宁省大中小学思政课一体化共同体建设推进会暨“同题异构”教学展示活动...
（2024-06-06）</p>
</div>
<script>
function x1(x){
x.style.background="blue"
}
function x2(x){
x.style.background="white"
}
</script>
<div onmouseover="x1(this)"onmouseout="x2(this)">
<img src="https://www.liaodongu.edu.cn/__local/3/C9/9A/528FE5A0EC53971DE36B5C548D6_1F486B9E_5E0A5.jpg"
alt="">
<p>辽宁省大中小学思政课一体化共同体建设推进会暨“同题异构”教学展示活动...
（2024-06-06）</p>
</div>
</div>
<div class="right-title" style="margin-top:10px">
<span class="title">
重要通知
</span>
</div>
<div class="left-list-wrap">
<div class="left-list"onmouseover="x1(this)"onmouseout="x2(this)">
<div class="icon">
<span>周四</span>
<span class="bg">05-30</span>
</div>
<p>艺术学院李钢教授获批农业农</p>
</div>
<div class="left-list"onmouseover="x1(this)"onmouseout="x2(this)">
<div class="icon">
<span>周四</span>
<span class="bg">05-30</span>
</div>
<p>艺术学院李钢教授获批农业农</p>
</div>
<div class="left-list"onmouseover="x1(this)"onmouseout="x2(this)">
<div class="icon">
<span>周四</span>
<span class="bg">05-30</span>
</div>
<p>艺术学院李钢教授获批农业农</p>
</div>
<div class="left-list"onmouseover="x1(this)"onmouseout="x2(this)">
<div class="icon">
<span>周四</span>
<span class="bg">05-30</span>
</div>
<p>艺术学院李钢教授获批农业农</p>
</div>
<div class="left-list"onmouseover="x1(this)"onmouseout="x2(this)">
<div class="icon">
<span>周四</span>
<span class="bg">05-30</span>
</div>
<p>艺术学院李钢教授获批农业农</p>
</div>
<div class="left-list"onmouseover="x1(this)"onmouseout="x2(this)">
<div class="icon">
<span>周四</span>
<span class="bg">05-30</span>
</div>
<p>艺术学院李钢教授获批农业农</p>
</div>
</div>
</div>
<div class="left-list-wrap"></div>
<script>
function initMsg(){
let msgs=[]
var left_wrap=document.querySelector("left-list-wrap");
for(var i=0;i<msgs.length;i++){
str+=`<div class="left-list">
<div class='icon'>
<span>${msgs[i].date}</span>
</div>
<p>${msgs[i].til}</p>`
}
}
</script>
<div class="right">
<div class="right-title">
<span class="title">
学校要闻
</span>
<a href="#">查看更多 >>></a>
</div>
<ol class="list">
<li>
<a href="#"onmouseover="x3(this)"onmouseout="x4(this)">辽东学院2024年招生章程</a>
<span>2024-06-07</span>
</li>
<li>
<a href="#" onmouseover="x3(this)"onmouseout="x4(this)">辽东学院2024年招生章程</a>
<span>2024-06-07</span>
</li>
<li>
<a href="#" onmouseover="x3(this)"onmouseout="x4(this)">辽东学院2024年招生章程</a>
<span>2024-06-07</span>
</li>
<li>
<a href="#"onmouseover="x3(this)"onmouseout="x4(this)">辽东学院2024年招生章程</a>
<span>2024-06-07</span>
</li>
<li>
<a href="#"onmouseover="x3(this)"onmouseout="x4(this)">辽东学院2024年招生章程</a>
<span>2024-06-07</span>
</li>
</ol>
<div class="right-title" style="margin-top:20px">
<span class="title">
校园经纬
</span>
<a href="#">查看更多 >>></a>
</div>
<script>
function x3(x){
x.style.color="blue"
}
function x4(x){
x.style.color="black"
}
</script>
<ol class="list">
<li>
<a href="#"onmouseover="x3(this)"onmouseout="x4(this)"
title="辽东学院2024年招生章程辽东学院2024年招生章程辽东学院2024年招生章程">辽东学院2024年招生章程辽东学院2024年招生章程辽东学院2024年招生章程</a>
<span>2024-06-07</span>
</li>
<li>
<a href="#"onmouseover="x3(this)"onmouseout="x4(this)">辽东学院2024年招生章程</a>
<span>2024-06-07</span>
</li>
<li>
<a href="#"onmouseover="x3(this)"onmouseout="x4(this)">辽东学院2024年招生章程</a>
<span>2024-06-07</span>
</li>
<li>
<a href="#"onmouseover="x3(this)"onmouseout="x4(this)">辽东学院2024年招生章程</a>
<span>2024-06-07</span>
</li>
<li>
<a href="#"onmouseover="x3(this)"onmouseout="x4(this)">辽东学院2024年招生章程</a>
<span>2024-06-07</span>
</li>
</ol>
</div>
</div>
</script>
</body>
</html>
```，
