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