移动版轮播图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新型轮播图</title>
<link rel="stylesheet" href="index.css">

*{
margin:0px;
padding: 0px;

}

.lunbo{
width: 1000px;
height: 400px;
border: 2px solid black;
margin:20px auto;
position: relative;
overflow: hidden;
}

.nav-bar{
width: 90px;
height: 20px;
/*background-color: pink;*/
text-align: center;
position: absolute;
bottom: 20px;
right: 20px;
z-index: 1;
}
.nav-bar .nav-span{
width: 20px;
height: 20px;
display: inline-block;
background-color: black;
border-radius: 10px;
}
.nav-bar .nav-span.selected{
background-color: white;
}

/*这个三个模块的承载体*/
.nav-father{
width: 3000px;
height: 400px;
/*background-color: red;*/

transition: all 2s;

}

.nav-child{
width: 1000px;
height: 400px;
float: left;
}

</head>

</div>

function time(){

//每次获得当前的selected,让下一个标签设置为selected
var selected = document.querySelector(".selected");
selected.className = "nav-span";
//让下一个兄弟节点变为selected
if(selected.nextElementSibling != null){
selected.nextElementSibling.className = "nav-span selected";
//获得selected.nextElementSibling.data-num
var number = selected.nextElementSibling.getAttribute("data-num");

var father = document.querySelector(".nav-father");
father.style.transform = "translate("+ number+",0px)";

}else{
selected.parentNode.firstElementChild.className = "nav-span selected";

//获得selected.nextElementSibling.data-num
var number = selected.parentNode.firstElementChild.getAttribute("data-num");
var father = document.querySelector(".nav-father");
father.style.transform = "translate("+ number+",0px)";
}

}

//定时器
//（1）每过4秒调用一次
//（2）每次首先获得当前的selected

var timer = setInterval(time,4000);

// 点击
//（1）找到所有的nav-span
var SpanArrays = document.querySelectorAll(".nav-span");
//(2)设置点击事件
for(var i = 0;i< SpanArrays.length;i++){

SpanArrays[i].onclick=function(){

clearInterval(timer);
//(3)让自己变成selected,让其他的变成正常
for(var j =0;j<SpanArrays.length;j++){
//还原成正常的
SpanArrays[j].className = "nav-span";

}
//(4)将点击的设置为 nav-span selected
this.className = "nav-span selected";

//换图片。。。指的是transform-translate
//找到nav-father
var father = document.querySelector(".nav-father");
//平移数值
var number = this.getAttribute("data-num");

father.style.transform = "translate("+ number+",0px)";

timer = setInterval(time,4000);
}
}

</script>

posted @ 2017-03-09 19:33 菜鸟婷婷阅读(166) 评论(0) 收藏举报

刷新页面返回顶部

菜鸟婷婷

移动版轮播图

公告