写的不好啊，自己没看讲解，先自己实现了一版。
总的原理就是 控制 三个div 的显示 || 不显示，以及三个相应按钮的颜色 普通色 || 高亮色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
list-style: none;
}
#clickGroup,#autoGroup{
margin: 10px;
padding: 10px;
}
h1{
color:tomato;
}
#clickGroup>div,#autoGroup>div{
width: 200px;
height: 200px;
background-color: pink;
border: 1px salmon solid;
/* div都不显示 */
display: none;
}
/* 初始时候，只显示第一个div */
#clickGroup>div:first-of-type,#autoGroup>div:first-of-type{
display: block;
}
/* button:first-of-type{
background-color: pink;
} */
</style>
</head>
<body>
<h1>点击事件组</h1>
<div id="clickGroup">
<button id="btn1">选项1</button>
<button id="btn2">选项2</button>
<button id="btn3">选项3</button>
<div id="div1">DIV1</div>
<div id="div2">DIV22</div>
<div id="div3">DIV333</div>
</div>
<h1>自动播放组</h1>
<div id="autoGroup">
<button id="btn1">选项1</button>
<button id="btn2">选项2</button>
<button id="btn3">选项3</button>
<div id="div1">DIV1</div>
<div id="div2">DIV22</div>
<div id="div3">DIV333</div>
</div>
<script type="text/javascript">
////////////////////////common_start///////////////////////////
function show(divArray,buttonArray,i){
// 【4】隐藏所有的div
for(let j = 0 ;j<divArray.length;j++){
divArray[j].style.display='none';
}
// 【5】去掉所有button的背景颜色
for(let k = 0;k<buttonArray.length;k++){
buttonArray[k].style.backgroundColor = '';
}
// 【6】显示需要显示的div
// 高亮所选button
divArray[i].style.display='block';
buttonArray[i].style.backgroundColor = 'pink';
}
////////////////////////common_end///////////////////////////
////////////////////////点击事件组_start///////////////////////////
// 【1】选中所有的div
let divArrayC = [...document.body.querySelectorAll('#clickGroup>div')];
// 【2】绑定button的事件
// 根据button的点击事件 控制 div的隐藏与显示
let buttonArrayC = [...document.body.querySelectorAll('#clickGroup>button')];
// console.log(buttonArray[0].style.backgroundColor);
buttonArrayC[0].style.backgroundColor = 'pink';
for(let i = 0;i<buttonArrayC.length;i++){
buttonArrayC[i]['onclick']=()=>{
// 【3】测试一下有没有绑定成功
// alert(i);
show(divArrayC,buttonArrayC,i);
}
}
////////////////////////点击事件组_end///////////////////////////
////////////////////////自动播放组_start///////////////////////////
// 【1】选中所有的div
let divArrayA = [...document.body.querySelectorAll('#autoGroup>div')];
// 【2】绑定button的事件
// 根据button的点击事件 控制 div的隐藏与显示
let buttonArrayA = [...document.body.querySelectorAll('#autoGroup>button')];
buttonArrayA[0].style.backgroundColor = 'pink';
let index = 0;
setInterval(() => {
// for(let index=0;index<3;index++){
show(divArrayA,buttonArrayA,index);
index++;
if(index==3){
index=0;
}
// }
}, 1000);
// setInterval;
////////////////////////自动播放组_end///////////////////////////
</script>
</body>
</html>
仅供参考。。。。。。
运行结果如下
顺便 安利一个 调试的小贴士
【调试小贴士】
红框的那个地方 就是你选中那个 元素，你要是想找到这个元素 边距 宽高啊 什么的，变蓝的地方，你 方向键盘的 上 || 下 就可以变大 变小的 看效果。找到最适合你的！！！