移動版輪播圖

時間 2019-11-30

標籤移動欄目無線简体版

原文原文鏈接

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

css

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

}this

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

.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;
}orm

/*這個三個模塊的承載體*/
.nav-father{
width: 3000px;
height: 400px;
/*background-color: red;*/htm

transition: all 2s;事件

}圖片

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

</head>get

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。