html轮播图背景色,轮播图的做法（更换背景颜色）

简单的轮播图

*{

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;

}

--------------------------分析-------------------------------------

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

// //(3)找到每一个span，设置点击

// arraySpan[i].onclick = function () {

// //2.先给点击的标签设置成selected类(黑色背景)

// //(2)遇到问题？如何让其他的span变成灰色，class = " "

// for (var n =0;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[i].onclick = function () {

//1.清除之前的定时器

clearInterval(timer);

//2.新建一个开启

timer = setInterval(dingshiqi,4000);

for (var n =0;n

arraySpan[n].className = " ";

}

this.className = "selected";

var father = document.querySelector(".father");

father.style.backgroundColor = this.getAttribute("data-color");

}

}