轮播图的做法（更换背景图片）

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"
<title>博客</title>
<style>

 

 

</style>

.top-photo{
width: 670px;
height: 280px;
float: left;
position:relative;
}
.top-photo img{
width: 670px;
height: 280px;
display: none;
}
.top-photo .selected{
display: block;
}
/*设置浮动*/
.top-photo ul {
float: right;
width: 120px;
position: absolute;
top:230px;
right: 20px;
}
.top-photo ul li{
list-style: none;
float: left;
width: 24px;
height: 24px;
border-radius:50%;
background:#666;
margin-left:5px;
display: inline-block;
text-align: center;
color: white;
}
/*设置轮播图里面的圆点颜色*/
.top-photo ul .orange{
background:#f77825;
}
.imgblock{
display: block;
}</style>


</head>
<body>

<!-- 轮播图的四个图片 -->
<div class="top-photo">
<img src="images/a1.jpg" alt="" class="selected" >
<img src="images/a2.jpg" alt="">
<img src="images/a3.jpg" alt="">
<img src="images/a4.jpg" alt="">
<!-- 轮播图的四个圆点 -->
<ul >
<li class="orange" data-li="0">1</li>
<li data-li="1">2</li>
<li data-li="2">3</li>
<li data-li="3">4</li>
</ul>
</div>

<script>

//函数区域
// var imgs= document.querySelectorAll(".top-photo img");
function dingshiqi(){

var orange= document.querySelector(".orange");
var selected = document.querySelector(".selected");
// 如果orange有下一个兄弟，那么则把下一个变成orange,
if(orange.nextElementSibling != null){
orange.nextElementSibling.className = "orange";
orange.className = " ";

selected.nextElementSibling.className = "selected";
selected.className = "";


}else{
// 如果没有下一个兄弟，则父标签的第一个变成orange
orange.parentNode.firstElementChild.className = "orange";
orange.className = " ";

selected.parentNode.firstElementChild.className ="selected";
selected.className = " ";

}

}



//定时器
var timer = setInterval(dingshiqi,4000);


var liArray = document.querySelectorAll(".top-photo ul li");
// console.log(liArray);
for(var n=0;n<liArray.length; n++){
liArray[n].onclick = function(){
//1.清除之前的定时器
clearInterval(timer);

// //2.新建一个开启
// timer = setInterval(dingshiqi,4000);
for(var i=0;i<liArray.length; i++){
liArray[i].className=" ";
console.log(liArray[i]);
}
this.className="orange";
var imgArray = document.querySelectorAll(".top-photo img");
for(var a=0;a<imgArray.length;a++){
imgArray[a].style.display="none";
number = this.getAttribute("data-li");
imgArray[number].style.display="block";

}
}

}

</script>

posted @ 2017-03-02 22:06  菜鸟婷婷  阅读(1592)  评论(0)    收藏  举报