移动版轮播图
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>
以上是关于移动版轮播图的主要内容，如果未能解决你的问题，请参考以下文章