<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单的轮播图</title> <style> 默认设置 *{ margin:0px; padding: 0px; } 大标签设置样式 .father{ width: 960px; height: 400px; background-color: red; border: 1px solid black; margin:50px auto; position: relative; transition: all 2s; } 小标签设置样式 .childs{ text-align: center; position: absolute; bottom: 20px; right: 20px; } 圆点设置 .childs span{ display: inline-block; height: 20px; width: 20px; background-color: #777; border-radius: 10px; } 圆点触碰效果 .childs span:hover{ background-color: white; } 圆点设置背景颜色 .childs .selected{ background-color: black; } </style> <body> 大标签 <div class="father"> 小标签 <div class="childs"> <span class="selected" data-color="red"></span> <span data-color="yellow"></span> <span data-color = "skyblue"></span> <span data-color = "orangered"></span> </div> </div> <script> 函数区域 function dingshiqi(){ 有多少selected var selected = document.querySelector(".selected"); 如果selected的下一个兄弟标签为空 if(selected.nextElementSibling != null){ selected的下一个兄弟类名为selected selected.nextElementSibling.className = "selected"; selected的类名为空 selected.className = " "; 打印大标签的背景样式为selected的下一个兄弟标签并得到自定义属性值 document.querySelector(".father").style.backgroundColor = selected.nextElementSibling.getAttribute("data-color"); 那么 }else{ selected中获得第一个标签元素他的父节点类名为selected selected.parentNode.firstElementChild.className = "selected"; selected的类名为空 selected.className = " "; 打印大标签的背景样式为selected的第一个标签的父节点并得到自定义的属性值 document.querySelector(".father").style.backgroundColor = selected.parentNode.firstElementChild.getAttribute("data-color"); } } 定时器 var timer = setInterval(dingshiqi,4000); 点击 var arraySpan = document.querySelectorAll("span"); for循环条件 for(var i =0;i<arraySpan.length;i++){ 点击事件 arraySpan[i].onclick = function () { 清除之前的定时器 clearInterval(timer); 新建一个开启 timer = setInterval(dingshiqi,4000); for循环条件 for (var n =0;n<arraySpan.length;n++) { 类名为空 arraySpan[n].className = " "; } 特指类名为selectedd this.className = "selected"; 打印大标签 var father = document.querySelector(".father"); 大标签的背景样式为特指得到的自定义属性 father.style.backgroundColor = this.getAttribute("data-color"); } } </script> </body> </html>