首页 > 代码库 > 轮播图的做法(更换背景颜色)

轮播图的做法(更换背景颜色)

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

轮播图的做法(更换背景颜色)