运用面向对象框架写JS轮播图

• 此种方法优点

• 运用面向对象思想框架式写活JS轮播图
• 不对写死图片数量，直接通过增加css图片实现页面效果
• 优化代码数量，优化性能。

代码

html部分

 <div class="swiper">
        <ul id="item-container" class="clearfix">
            <li class="item">
                <img src="./images/1.webp" alt="">
            </li>
            <li class="item">
                <img src="./images/2.webp" alt="">
            </li>
            <li class="item">
                <img src="./images/3.webp" alt="">
            </li>
            <li class="item">
                <img src="./images/4.webp" alt="">
            </li>
            <li class="item">
                <img src="./images/5.webp" alt="">
            </li>
        </ul>
        <div class="circle">

        </div>
        <div class="arrow left">
            <img src="/images/left.png" alt="">
        </div>
        <div class="arrow right">
            <img src="/images/right.png" alt="">
        </div>

    </div>

css部分

body,
ul {
    margin: 0;
    padding: 0
}

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

.swiper {
    width: 1000px;
    outline: 3px solid red;
    margin: 100px auto 0;
    overflow: hidden;
    height: 333px;
    position: relative;
}

ul {
    list-style: none;
    font-size: 0;
    transition: 0.3s;
}

ul li {
    float: left;
}

ul li img {
    width: 100%;
}

.circle {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.circle span {
    display: inline-block;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgb(216, 158, 132);
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    cursor: pointer;
    margin-left:10px ;
}

.circle span:hover {
    background-color: rgb(224, 135, 94);
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.arrow.left {
    left: 20px;
}

.arrow.right {
    right: 20px;
}

JavaScript部分

let swiper = document.querySelector('.swiper');
let itemContainer = document.querySelector('#item-container')
let leftBtn = document.querySelector('.left')
let rightBtn = document.querySelector('.right')
let items = document.querySelectorAll('.item')
let circle = document.querySelector('.circle')

//获取图片的数量
let count = items.length
//获取轮播图容器的宽度
let swiperWidth = parseFloat(getComputedStyle(swiper).width)
//默认当前索引为0
let index = 0;

//给每个li去设定宽度
items.forEach(function(el){
    el.style.width = swiperWidth + "px"
})
//获取第一个li.item的高度，li的高度由图片撑开，也就是要获取图片在保持比例不变的情况下的高度，让图片都能完成显示出来
//请确保每个图片的比例大小相同
itemHeight = parseFloat(getComputedStyle(items[0]).height)
//把图片的高度设置给swiper容器，让图片能够按照比例的全部显示
swiper.style.height = itemHeight + "px"

//给ul去设定宽度，让所有的li.item都都能排成一行
itemContainer.style.width = swiperWidth * count + 'px'

//根据图片的数量动态生成数字指示器html
let circlesHtml = ''
for(var i=0;i<count;i++){
    circlesHtml += `<span data-index=${i}>${i+1}</span>`
}
circle.innerHTML = circlesHtml

//封装下一张函数
function next(){
    if(index == count-1){
        index = -1
    }
    index++
    goTo(index)
}
//封装上一张函数
function prev(){
    if(index == 0){
        index = count
    }
    index--
    goTo(index)
}
//封装跳转函数
function goTo(i){
    index = i
    itemContainer.style.transform = `translateX(${-swiperWidth*i}px)`
}
//给左右按钮添加事件，用两种不同的方式
leftBtn.addEventListener('click',prev)
rightBtn.onclick = next
//通过事件代理的方式给数字指示器添加事件
circle.addEventListener('click',function(e){
    let curEle = e.target
    let curIndex = curEle.dataset.index
    goTo(curIndex)
})