<!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>
