轮播图终极版-CFANZ编程社区

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