<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript原生轮播</title>
<style>
.container{
width: 800px;
height: 600px;
margin: 0 auto;
border: 1px solid red;
position: relative; /*给包围大盒的内容定位*/
}
.banner{
width: 100%;
height: 100%;
text-align: center;
line-height: 600px;
color: #fff;
font-size: 60px;
display: none; /*所有的都隐藏*/
}
.btnbox{
width: 200px;
height: 25px;
position: absolute;
right: 150px;
bottom: 50px; /*给圆点定位*/
}
div.btn{
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
color: #fff;
background: #000;
border-radius: 50%;
float: left;
margin-left: 10px;
}
.le{
width: 30px;
height: 60px;
line-height: 60px;
position: absolute; /*给左右相同类名的样式*/
top: 50%;
margin-top:-30px;
color: #fff;
text-align: center;
font-size: 40px;
background: rgba(0,0,0,.5);
}
.leftbtn{left: 0;} /*改变位置*/
.rightbtn{
right: 0;
}
</style>
</head>
<body>
<div class="container">
<!--图片-->
<div class="banner" style="background: pink;display: block;">1</div>
<div class="banner" style="background:deepskyblue;">2</div>
<div class="banner" style="background: yellowgreen;">3</div>
<div class="banner" style="background: yellow;">4</div>
<div class="banner" style="background: lightcoral;">5</div>
<!--按钮圆点-->
<div class="btnbox">
<div class="btn" style="background: red;">1</div>
<div class="btn">2</div>
<div class="btn">3</div>
<div class="btn">4</div>
<div class="btn">5</div>
</div>
<!--左右按钮-->
<div class="leftbtn le"><</div>
<div class="rightbtn le">></div>
</div>
<script>
/*获取所有的元素*/
var banner = document.querySelectorAll(".banner");
var btns = document.querySelectorAll(".btn");
var container = document.querySelector(".container");
var left=document.querySelector(".leftbtn");
var right=document.querySelector(".rightbtn");
//开启计时器
var t = setInterval(move,1000);
//定义一个空的数字。从0开始切换
var num = 0;
function move(){
num++;
//每次num++
//判断当图片切换到5张,自动清零.
if(num == banner.length){
num = 0;
}
//for循环图片的长度，
for(var i=0;i<banner.length;i++){
banner[i].style.display = "none"; //获取下标让图片隐藏
btns[i].style.background = "black"; //切换圆点变成黑色
}
banner[num].style.display = "block"; //图片显示
btns[num].style.background = "red"; //切换圆点变成红色
};
//清除移入计时器
container.onmouseover = function(){
clearInterval(t);
}
//清除移除计时器
container.onmouseout = function(){
t = setInterval(move,1000);
}
//btns集合中的每一个对象 ------- 点击事件
for(var i = 0;i<btns.length;i++){
btns[i].index = i; //自定义他的下标
btns[i].onclick = function(){
for(var j = 0;j<btns.length;j++){
btns[j].style.background = "black";
banner[j].style.display = "none";
}
this.style.background="red";
banner[ this.index ].style.display="block";
num = this.index;//num的下标等于按钮的下标
}
}
//点击右按钮
right.onclick=function(){
move();
}
//点击左按钮
left.onclick=function(){
num--;//每次点击向左跑
if(num == -1){
num = banner.length-1;
}
for(var i=0;i<banner.length;i++){
banner[i].style.display = "none";
btns[i].style.background = "black";
}
banner[num].style.display = "block";
btns[num].style.background = "red";
}
</script>
</body>
</html>
