移动版轮播图

Posted 菜鸟婷婷

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动版轮播图相关的知识,希望对你有一定的参考价值。

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

以上是关于移动版轮播图的主要内容,如果未能解决你的问题,请参考以下文章

jq版轮播图

84JS插件:jQuery版轮播图

[css] 小案例---简版轮播图

轮播图测试点

react-native构建基本页面1---轮播图+九宫格

vue_cli轮播图--swiper插件