思路:
根据图片遍历获得索引,
利用索引创建绑定下方按钮,
通过移动图片父元素的左间距实现图片切换,
自动调用右切图方法实现自动轮播。
css部分
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#box {
width: 300px;
height: 300px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto auto;
border: 2px solid skyblue;
padding: 20px;
/* position: relative; */
}
.button {
height: 60px;
width: 300px;
position: absolute;
left: 0;
top: 135px;
display: flex;
justify-content: space-between;
margin: 0 20px;
/* background: black; */
display: none;
/* display: block; */
}
.button span {
width: 60px;
height: 60px;
border-radius: 50%;
opacity: 0.8;
background: white;
font-size: 60px;
color: black;
line-height: 50px;
text-align: center;
}
#left {
position: absolute;
left: 0;
}
#right {
position: absolute;
right: 0;
}
im