轮播图的编写学习

首先创建一个html的列表形式的html显示：

<!-- vscode 里可以 div.shell>ul.images>li.img*3来快速编写-->
<div class="shell">
	<ul class="images">
    	<li class="img"></li>
        <li class="img"></li>
        <li class="img"></li>
    </ul>
    <ul class="min-images">
    	<li class="min"></li>
        <li class="min"></li>
        <li class="min"></li>
     </ul>
</div>

css编辑布局:

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}
body{
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background-color: rgb(170,190,250);
}

.shell{
    width: 900px;
    height: 500px;
    position: relative;
    overflow-x: hidden;
    border-radius: 5px;
    border: 10px #fff solid;
    box-shadow: 20px 30px 20px rgba(0, 0, 0, .5);
}

.images{
    width: 300%;
    height: 100%;
    display: flex;
    position: absolute;
    left:0;
    transition: .5s;
}

.img{
    width: 100%;
    background-size: cover;
}
.img:nth-child(1){
    background-image: url("");
}
.img:nth-child(2){
    background-image: url("");
}
.img:nth-child(3){
    background-image: url("");
}

.min-images{
    display: flex;
    justify-content: space-evenly;
    position: absolute;
    bottom: 20px;
    width: 20%;
    z-index: 999;
    right: 5%;
}
.min{
    width: 10px;
    height: 10px;
    cursor: pointer;
    border-radius: 50%;
    background-size: cover;
    border: solid 5px rgba(255, 255, 255, 0.5);

}
.min:hover{
    transition:0.5s all ease 0s;
    transform: scale(1.2);
}

justify-content:水平垂直

display:属性设置元素如何显示。

flex:Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

bottom:底部对齐，距离底部XXXpx

cursor: pointer;变成手指

background-size: cover;自适应大小

box-shadow:20px 30px 20px rgba(0, 0, 0, .5);
第一个20px:左阴影长度
30px : 底部阴影长度
第二个20px:阴影深浅(值越小越明显)
Reba:定义阴影颜色;rgba(red, green, blue,颜色深浅)

---

接下来是js的代码让他动起来

1、先获取元素,定义索引和定时器存放变量:

let images = document.querySelector('.images');
let min = document.querySelectorAll('.min');

let index1 = 0;
let time1;

2、定义方法

function imgRun(){
    images.style.left = (index1 * -100) + "%";
}//位移量

//add1()和desc2()是判断是否超出了范围
function add1(){
    if(index1 >= min.length - 1){
        index1 = 0;
    }else{
        index1++;
    }
}

function desc2(){
    if(index1 < 1){
        index1 = min.length - 1;
    }else{
        index1--;
    }
}

3、定义一个定时器方法:

function timer(){
    time1 = setInterval(()=>{
        index1++;
        desc2();
        add1();
        imgRun();
    },2000);
}

注意:一定要desc2()方法在前，不然他会一直停留在最后一张,原因是:（如果add1()放在了desc2()前面）

index++(=2时)
进入add1()index = 0;
进入desc()判断index < 1;所以index = min,length - 1;
所以一直是最后一张