寫的不好啊，自己沒看講解，先自己實現了一版。
總的原理就是 控制 三個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>
僅供參考。。。。。。
運行結果如下
順便 安利一個 調試的小貼士
【調試小貼士】
紅框的那個地方 就是你選中那個 元素，你要是想找到這個元素 邊距 寬高啊 什麼的，變藍的地方，你 方向鍵盤的 上 || 下 就可以變大 變小的 看效果。找到最適合你的！！！