1、越界处理
showIndex = showIndex === data.length ? 0 : showIndex;
changeBg(data[showIndex]);
dots[showIndex].classList.add(“now”);
2、瀑布流
1>先确定屏幕的宽度,按照我们定义的列宽来确定ul的大小和位置
2>根据屏幕的宽度和ul的单位宽度来设置列数并重新调整ul的宽度
3>填充arrHeight以及li
3、获取最小下标
function getMin(){
var min = 0;
for(var i=1;i<arrHeight.length;i++){
if(arrHeight[min] > arrHeight[i]){
min = i;
}
}
return min;
}
4、随机函数
function rand(min,max){
return Math.round(Math.random() * (max-min) + min);
}
轮播图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo01</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 500px;
height: 350px;
margin: 0 auto;
position: relative;
background-color: orange;
background-size: cover;
background-position: center center;
}
.arraw {
width: 30px;
height: 30px;
background-color: rgba(0, 0, 0, .7);
color: #fff;
line-height: 30px;
text-align: center;
position: absolute;
top: 160px;
border-radius: 50%;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
.dots {
position: absolute;
width: 160px;
height: 20px;
background-color: rgba(0, 0, 0, .7);
bottom: 10px;
left: 170px;
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 10px;
}
.dot {
width: 10px;
height: 10px;
background-color:<