码迷,mamicode.com
首页 > 移动开发 > 详细

移动版轮播图

时间:2017-03-09 20:22:11      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:translate   lin   click   inline   数值   attr   attribute   range   ati   

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

<body>
<!-- 1.新建一个轮播div -->
<div class="lunbo">

<div class="nav-bar">
<span class="nav-span selected" data-num = "0px"></span>
<span class="nav-span" data-num = "-1000px"></span>
<span class="nav-span" data-num = "-2000px"></span>
</div>

<!-- 小页面的承载体 -->
<div class="nav-father">
<div class="nav-child" style="background-color: pink;"></div>
<div class="nav-child" style="background-color: skyblue;"></div>
<div class="nav-child" style="background-color: orange;"></div>

</div>

 

</div>

<script>

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>

移动版轮播图

标签:translate   lin   click   inline   数值   attr   attribute   range   ati   

原文地址:http://www.cnblogs.com/cntt/p/6527353.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!