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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
| <style>
.carousel-container {
position: relative;
width: 253px;
height: 150px;
margin: 20px auto;/*设置元素的外边距 */
overflow: hidden;/*设置元素的溢出处理方式为隐藏 */
outline: 10px solid #000;
}
.carousel-list{
display: flex;/*设置元素的布局方式为弹性布局 */
width: 100%;
height: 100%;
position: relative;
}
.carousel-item{
justify-content: center;
align-items: center;
font-size: 50px;
font-weight: bold;
flex: 0 0 100%;/*设置元素的伸缩性 */
}
.item-1{
background-color: red;
display: flex;
}
.item-2{
background-color: blue;
display: flex;
}
.item-3{
background-color: green;
display: flex;
}
.carousel-arrow{
position: absolute;
top: 50%;
transform: translateY(-50%);/*设置元素的垂直偏移 */
width: 30px;
height: 30px;
background: #0000007a;
color: #fff;
cursor: pointer;/*设置元素的鼠标样式为手型 */
border-radius: 50%;/*设置元素的边框半径 */
display: flex;
align-items: center;
justify-content: center;
}
.carousel-arrow-left{
left: 10px;
}
.carousel-arrow-right{
right: 10px;
}
.indicator{
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
/*其中span.active代表指示器的激活状态；总span数量是轮播图数量*/
.indicator span.active{
background: #fff;
border-color: #fff;
}
.indicator span{
width: 10px;
height: 10px;
margin: 0 3px;
border-radius: 50%;/*设置元素的边框半径 */
cursor: pointer;/*设置元素的鼠标样式为手型 */
border: 2px solid #ccc;
}
</style>
<div class="carousel-container">
<div class="carousel-list">
<div class="carousel-item item-1">1</div>
<div class="carousel-item item-2">2</div>
<div class="carousel-item item-3">3</div>
</div>
<div class="carousel-arrow carousel-arrow-left"><</div>
<div class="carousel-arrow carousel-arrow-right">></div>
<div class="indicator">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
<script>
window.doms={
carouselList:document.querySelector('.carousel-list'),
arrowLeft:document.querySelector('.carousel-arrow-left'),
arrowRight:document.querySelector('.carousel-arrow-right'),
indicators:document.querySelectorAll('.indicator span'),
};/*获取元素 */
const count=doms.indicators.length;/*获取指示器(轮播图)的数量 */
let curIdx=0;/*当前轮播图的索引 */
function moveTo(index){
doms.carouselList.style.transform=`translateX(-${index*100}%)`;/*第一张不移动，第二张移动-100%；第三张移动-200% */
doms.carouselList.style.transition='transform 0.5s';/*设置元素的过渡效果 */
/*设置指示器的激活状态 */
doms.indicators.forEach((indicator,i)=>{
indicator.classList=i===index?'active':'';/*如果i等于index，就添加active类，否则就移除active类 */
});
curIdx=index;/*更新当前轮播图的索引 */
}
/*遍历指示器，为每个指示器添加点击事件 */
doms.indicators.forEach((indicator,index)=>{
indicator.onclick=()=>{
moveTo(index);
};
});
/*无缝轮播图经典套路，overflow: hidden;属性欺骗用户眼睛 */
function init(){
const firstClone=doms.carouselList.firstElementChild.cloneNode(true);/*克隆第一个轮播图 */
const lastClone=doms.carouselList.lastElementChild.cloneNode(true);/*克隆最后一个轮播图 */
doms.carouselList.append(firstClone);/*将克隆的第一个轮播图添加到轮播图列表的最后 */
doms.carouselList.prepend(lastClone);/*将克隆的最后一个轮播图添加到轮播图列表的最前 */
lastClone.style.marginLeft='-100%';/*将克隆的最后一个轮播图向左移动100% */
}
init();
/*以下为左右箭头点击事件 */
function moveLeft(){
if (curIdx===0){
doms.carouselList.style.transition='none';/*设置元素的过渡效果 */
doms.carouselList.style.transform=`translateX(-${count*100}%)`;/*移动到最后一张轮播图 */
doms.carouselList.clientWidth;/*强制重绘 */
moveTo(count-1);/*移动到倒数第二张轮播图 */
}
else{
moveTo(curIdx-1);
}
}
function moveRight(){
if (curIdx===count-1){
doms.carouselList.style.transition='none';/*设置元素的过渡效果 */
doms.carouselList.style.transform='translateX(100%)';/*移动到第一张轮播图 */
doms.carouselList.clientWidth;/*强制重绘 */
moveTo(0);/*移动到第二张轮播图 */
}
else{
moveTo(curIdx+1);
}
}
doms.arrowLeft.onclick=moveLeft;
doms.arrowRight.onclick=moveRight;
</script>
|
