<!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;
}
/*love i hate*/
.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>
</head>
<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>
--------------------------分析-------------------------------------
// 1.考虑，大概4S实线一次功能
// setInterval(function(){
// //2.每过4S会找到slected的下一个兄弟标签，把这个兄弟标签变成selected
// //（1）找到当前的slected
// var selected = document.querySelector(".selected");
// // //(2)找到它的下一个兄弟标签，设置成selected
// // selected.nextElementSibling.className = "selected";
// // //(3)取消selected的类
// // selected.className = " ";
// //3.发现最后一个没用下一个兄弟标签，所以应该找父标签的第一个子标签
// if(selected.nextElementSibling != null){
// //(1)找到它的下一个兄弟标签，设置成selected
// selected.nextElementSibling.className = "selected";
// //(2)取消selected的类
// selected.className = " ";
// //(4)给背景加颜色
// document.querySelector(".father").style.backgroundColor =
// selected.nextElementSibling.getAttribute("data-color");
// }else{
// // (3)没有下一个兄弟
// selected.parentNode.firstElementChild.className = "selected";
// selected.className = " ";
// //(4)给背景加颜色
// document.querySelector(".father").style.backgroundColor = selected.parentNode.firstElementChild.getAttribute("data-color");
// }
// },4000);
//--------------------点击------------------------
//1.给4个span标签设置点击事件
//（1）找到四个span
// var arraySpan = document.querySelectorAll("span");
// //(2)循环遍历数组，增加点击事件
// for(var i =0;i<arraySpan.length;i++){
// //(3)找到每一个span，设置点击
// arraySpan[i].onclick = function () {
// //2.先给点击的标签设置成selected类（黑色背景）
// //(2)遇到问题？如何让其他的span变成灰色，class = " "
// for (var n =0;n<arraySpan.length;n++) {
// arraySpan[n].className = " ";
// }
//(1)
// this.setAttribute("class","selected");
//class是属性的一种，为了方便能够快速设置class，DOM允许用className 代替 setAttribute("class","");
// this.className = "selected";
// //3.如何变色，让谁变色？？.father
// // (1)找到father
// var father = document.querySelector(".father");
// //4.考虑到每次点击和换颜色的时候，都有一个span标签被选中了
// father.style.backgroundColor = this.getAttribute("data-color");
// }
// }
// 找到当前的selected
setInterval(function(){
var selected= document.querySelector(".selected");
// 找到他的下一个兄弟标签，设置成 selected;
// selected.nextElementSibing.className = "selected";
// 取消selected的类；
// selected.className=" ";
// 发现最后一个没有下一个兄弟标签，所以应找到父标签的第一个子标签；
-----------------------定时器+点击部分----------------
if(selected.nextElementSibling!=null){
selected.nextElementSibling.className="selected";
selected.className=" ";
document.querySelector(".father").style.backgroundColor=selected.nextElementSibling.getAttribute("data-color");
}else{
selected.parentNode.firstElementChild.className="selected";
document.querySelector(".father").style.backgroundColor=selected.nextElementSibling.getAttribute("data-color");
}
},4000);
var arraySpan = document.querySelectorAll("span");
for(var i =0;i<arraySpan.length;i++){
arraySpan[i].onclick = function () {
//1.清除之前的定时器
clearInterval(timer);
//2.新建一个开启
timer = setInterval(dingshiqi,4000);
for (var n =0;n<arraySpan.length;n++) {
arraySpan[n].className = " ";
}
this.className = "selected";
var father = document.querySelector(".father");
father.style.backgroundColor = this.getAttribute("data-color");
}
}
</script>
</body>
</html>