原生js用div实现简单的轮播图

.wrap {
/* 展示区域样式 */
width: 500px;height: 400px;
box-shadow: 0 0 10px rgba(0,0,0,.5);
display: flex;
overflow: hidden;
position: relative;
}
.swipe {
width: 2500px;
display: flex;
position: absolute;
left:;
/* 给图片变化添加过渡效果，时间不能超过定时器一次的时间，否则会冲突 */
transition: .8s;
}
/* 被轮播的子元素样式 */
.box{
width: 500px;height: 400px;
background-color: rgb(228, 226, 226);
color: #fff;
font-size: 200px;
}
button{
width: 100px;height: 40px;
margin: 10px 5px;
border-radius: 8px;
background-color: rgb(202, 202, 202);
font-size: 22px;
color: white;
}

<!-- 一些按钮 -->
<button class="prev">prev</button>
<button class="next">next</button>
<br>
<button class="btn">one</button>
<button class="btn">two</button>
<button class="btn">three</button>
<button class="btn">four</button>
<button class="btn">five</button>
<!-- 展示区域 -->
<div class="wrap">
<!-- 被轮播的元素父级 -->
<div class="swipe">
<!-- 被轮播的子元素列表 -->
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
<div class="box">box5</div>
</div>
</div>

<script>
// 获取元素
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
var btns = document.querySelectorAll(".btn");
var swipe = document.querySelector(".swipe"); // 自动播放
// 封装函数
// 判断索引，改变left值的函数
function nextFn(){
index = index == 4 ? 0 : ++index;
// 定位元素left才会生效
swipe.style.left = -index * 500 + "px";
} // 定时器的函数
function autoPlay(){
autoTinmer = setInterval(function(){
// left初始值为0，每张图片的left是图片宽度乘图片数量
// 只有五张图片，能移动的left最大的left是四张图的，index等于4的时候恢复到0，否则index++
nextFn();
},2000);
}
// 页面一刷新就自动播放；
autoPlay();
// 声明当前展示的图片的顺序
var index = -1;
var autoTinmer; // 点击prev next
next.onclick = function(){
// 先停止自动播放 先展示完下一张
clearInterval(autoTinmer);
// 点击next立即展示下一张
nextFn();
//继续自动播放
autoPlay();
}
prev.onclick = function(){
clearInterval(autoTinmer);
// 点击prev立即展示上一张
index = index == 0 ? 4 : --index;
swipe.style.left = -index * 500 + "px";
autoPlay();
}
// 点击对应顺序按钮
// 循环遍历所有1-5的button
for(var j = 0; j < btns.length; j++){
// 每一个btn绑定点击事件
btns[j].onclick = function(){
// 先停止自动播放的定时器
clearInterval(autoTinmer);
// 获取当前按钮在btns中的顺序获取到
// 这里不能用indexOf方法，因为这是一个伪数组，不是一个数组，不能使用数组的方法
// getAttribute获取为标签自定义html属性的值
var i = this.getAttribute("data-i");
// console.log(i);
// 根据这个顺序设置swipe的left值
swipe.style.left = - i * 500 + "px";
// 恢复自动播放的定时器
autoPlay();
}
}
</script>