NO.12 轮播图的实现

简介

轮播图在网上也叫跑马灯，转盘，或者是叫幻灯片。多数在网站首页做banner宣传用途广泛，常见。各类插件的出现减轻了我们的工作但是还是造一次轮子写一个吧。

实现功能

左右点击轮播
底部点击跳转
底部按键高亮
简单粗暴的过渡动画
模块化代码
自动轮播（按需求添加）

我的思路

使用flex布局容器把块排成一行

点击左右键跳到下一页

点击底部按键跳转到对应的banner图

点击最后一页或第一页进行判断跳转

写好基本结构

const PAGE = {
  data:{
    //数据
  },
  init:function(){
    this.bind();
    this.inster();
  },
  bind:function(){
    //绑定事件
  },
  inster:function(){
    //插入数据
  }
}
PAGE.init();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

写入需要的数据

data:{
  index:0,	//banner第几个
  boxWidth:0,	//容器宽度
  boxItemlength:null,	//容器里子元素的个数
  translateX:0,	//偏移值
}

1
2
3
4
5
6

写上绑定事件

给左右按钮绑定事件，底部按钮使用for循环绑定事件

bind:function(){
  //左右按钮绑定
		let rightBtn = document.getElementById('right');
		let leftBtn = document.getElementById('left');
		rightBtn.addEventListener('click',this.rightBtn);
		leftBtn.addEventListener('click',this.leftBtn);
  //底部按钮
		let minBtn = document.getElementsByClassName('minBtn');
		for(var i = 0; i < minBtn.length; i++){
			minBtn[i].setAttribute('data-index', i);
			minBtn[i].addEventListener('click',this.highlighGo)
		}
	},

1
2
3
4
5
6
7
8
9
10
11
12
13

获取到需要的值传回数据data中

cheak:function(){
		let box = document.getElementsByClassName('content')[0];
		let itemLength = document.getElementsByClassName('item').length;
		let boxWidth = box.offsetWidth;
		PAGE.data.boxWidth = boxWidth;
		PAGE.data.boxItemlength = itemLength;
		let index = PAGE.data.index;
		PAGE.animation(index);
		PAGE.data.translateX = -(boxWidth*index);
	},

1
2
3
4
5
6
7
8
9
10

核心内容取得偏移值插入到DOM中

let boxWidth = PAGE.data.boxWidth;
let translateX = -(boxWidth*index);
let box = document.getElementsByClassName('content')[0];
box.style.transform = `translateX(${translateX}px)`;
PAGE.highligh(index); //调用按键高亮函数

1
2
3
4
5

左右按键事件内容完善

rightBtn:function(){
		let index = PAGE.data.index +=1;
  //判断是不是右边最后一张
		if (index >= PAGE.data.boxItemlength) {
			PAGE.data.index = 0
			PAGE.animation(0)
			return
		}
		PAGE.animation(index)
	},
	leftBtn:function(){
		let index = PAGE.data.index -= 1;
    //判断是不是左边最后一张
		if(index < 0 ){
			PAGE.data.index = PAGE.data.boxItemlength - 1
			PAGE.animation(PAGE.data.boxItemlength - 1)
			return
		}
		PAGE.animation(index)
	},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

底部按键事件内容完善

//高亮底部点击按钮
	highligh:function(index){
		let minBtn = document.getElementsByClassName('minBtn');
		console.log(minBtn.length);
		
		for(var i = 0; i < minBtn.length; i++){
			minBtn[i].className = 'minBtn'
		}
		console.log(index);
		minBtn[index].className = "minBtn on"	
	},
	//底部按钮点击跳转
	highlighGo:function(e){
		let index = e.target.dataset.index;
		console.log(index)
		PAGE.animation(index)
	}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

定时器事件

seTime:function(){
		let index = PAGE.data.index;	
		setInterval(function(){
				
				if (PAGE.data.index>= PAGE.data.boxItemlength -1) {
					console.log('0k');
					
					PAGE.data.index = -1
				}
				PAGE.animation(PAGE.data.index +=1)
			},4000);
	},

1
2
3
4
5
6
7
8
9
10
11
12

附上html结构

<!DOCTYPE html>
<html>
<head>
	<title>demo</title>
	<link rel="stylesheet" type="text/css" href="index.css">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
  <div class="content">
    <a class="item" href="javascript:;"><img src="http://a1.jikexueyuan.com/home/201609/26/2027/57e8bdeeea6b8.jpg"></a>
    <a class="item" href="javascript:;"><img src="http://a1.jikexueyuan.com/home/201612/20/3864/5858a55254617.png"></a>
    <a class="item" href="javascript:;"><img src="http://a1.jikexueyuan.com/home/201612/19/9863/58573bd1eb3fc.jpg"></a>
    <a class="item" href="javascript:;"><img src="http://a1.jikexueyuan.com/home/201612/19/2aa3/58573b737d2db.jpg"></a>
  </div>
  <ul>
    <li class="minBtn"></li>
    <li class="minBtn"></li>
    <li class="minBtn"></li>
    <li class="minBtn"></li>
  </ul>
  <div class="btn">
    <div class="left" id="left"></div>
    <div class="right" id="right"></div>
  </div>
</div>
</body>
<script src="jsindex.js"></script>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

css动画语句

transition:transform 1s;

完整CSS

*{
  margin:0;
  padding:0;
}
a{
  display:block;
  width:750px;
  height:330px;
  float:left;
}
/* 外观容器 */
.container{ 
  width:750px;
  height:330px;
  margin:10px auto;
  overflow:hidden;
  position:relative;
}
/* 图片容器 */
.content{
  display: flex;
  width:100%;
  height:330px;
  position:absolute;
  font-size:0;
  transition:transform 1s;
}
/* 清除列表样式 */
ul,li{
  list-style:none;
}
/* 下面的小点点 */
ul{
  width:100%;
  height:16px;
  text-align:center;
  position:absolute;
  bottom:15px;
}
li{
  width:8px;
  height:8px;
  background:#fff;
  display:inline-block;
  cursor:pointer;
}
/* 选中的小点点 */
.on{
  height:16px;
  background:#35b558;
}

/* 左右btn */
.btn{
  width:710px;
  height:40px;
  position:absolute;
  top:50%;
  margin-top:-20px;
  padding:0 20px;
}
.left ,.right{
  width:40px;
  height:40px;
  transform: rotate(-45deg);
  cursor:pointer;

}
.left{
  border-left:5px solid #ccc;
  border-top:5px solid #ccc;
  float:left;
}
.right{
  border-right:5px solid #ccc;
  border-bottom:5px solid #ccc;
  float:right;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

← NO.10瀑布流布局 NO.13 了解构造函数 →