轮播图封装-纯JS

-----------------html----------------

<div class="swiper"></div>
<script src="js/封装轮播.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//图片列表
var imgList = ['img/1.webp.jpg','img/5.webp.jpg','img/2.jpeg','img/3.webp.jpg','img/4.webp.jpg']
var swiper1 = swiper('.swiper',imgList);
</script>

----------------css--------------------

*{
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}
.swiper{
width: 1126px;
height: 460px;
margin: 0 auto;
position: relative;
}
.imgList{
width: 100%;
height: 100%;
position: relative;
}
.imgItem{
width: 100%;
height: 100%;
background-size: 100% 100%;
position: absolute;
opacity: 0;
/*设置过渡效果*/
transition: all 0.6s;
}
.imgItem.active{
opacity: 1;
}
.btn_left{
width: 100px;
height: 70px;
line-height: 70px;
text-align: center;
background-color: rgba(0,0,0,0.6);
position: absolute;
color: white;
top:calc(50% - 35px)
}
.btn_right{
width: 100px;
height: 70px;
line-height: 70px;
text-align: center;
background-color: rgba(0,0,0,0.6);
position: absolute;
right: 0px;
color: white;
top:calc(50% - 35px)
}
.swiper>.circle{
width: 100%;
height: 80px;
display: flex;
padding: 0 10px;
justify-content: flex-end;
align-items: center;
position: absolute;
left: 0;
bottom: 0;
}
.circleItem{
width: 10px;
height: 10px;
border: 2px solid #999;
background-color: #666;
border-radius: 5px;
margin: 0 10px;
}
.circleItem.active{
background-color: #ccc;
border: 2px solid #999;
}

--------------------js----------------------

//swiper(图片生成位置，图片列表)
function swiper(selctor,imgList){
//获取选择的节点
var getSwip = document.querySelector(selctor);
// 创建html结构
function creatDom (imgList) {
//生成图片列表
var imgListDiv = document.createElement('div');
imgListDiv.className = 'imgList';

//生成小圆点
var circleList = document.createElement('div');
circleList.className = 'circle';

imgList.forEach(function(item,i){
//根据图片数量生成图片列表
if(i == 0){
// 第一个的话加上active
imgListDiv.innerHTML += `<div class="imgItem active" style="background-image: url(`+item+`);"></div>`
circleList.innerHTML += `<div id='id`+i+`' class="circleItem active"></div>`
}else{
imgListDiv.innerHTML += `<div class="imgItem" style="background-image: url(`+item+`);"></div>`
circleList.innerHTML += `<div id='id`+i+`' class="circleItem"></div>`
}
})
// 将生成的图片列表添加到swiper里
getSwip.appendChild(imgListDiv)
// 将生成的小圆点添加到swiper里
getSwip.appendChild(circleList)
// 将左右两个按钮添加到swiper里
getSwip.innerHTML += `<div class="btnList">
<div class="btn_left"><</div>
<div class="btn_right">></div>
</div>`
}
creatDom(imgList);
var leftBtn = document.querySelector('.btn_left');
var rightBtn = document.querySelector('.btn_right');
var imgListDivAll = document.querySelectorAll('.imgItem')
var getCircleAll = document.querySelectorAll('.circleItem')
// 设置图片下标
var firstImg = 0;
rightBtn.onclick = function(){
firstImg +=1;
//初始化，将所有图片列表的active去掉
if(firstImg >4){
firstImg = 0;
}
rederNumImg();
}
leftBtn.onclick = function(){
firstImg -=1;
//初始化，将所有图片列表的active去掉
if(firstImg <0){
firstImg = imgListDivAll.length-1;
}
rederNumImg();
}

function rederNumImg(){
imgListDivAll.forEach(function(item){
item.classList.remove('active')
})
getCircleAll.forEach(function(item){
item.classList.remove('active')
})
imgListDivAll[firstImg].classList.add('active');
getCircleAll[firstImg].classList.add('active');
//点击圆点触发的事件
getCircleAll.forEach(function(item,i){
item.onclick = function(){
// 获取圆点的id数字
//var index = parseInt(item.id[2])
firstImg = i;
rederNumImg();
}
})
}
}