js实现轮播图

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

话不多说直接上代码！

html部分

  <!-- 走马灯 -->
   <!-- 图片长度大于4张显示这个div -->     
     <div v-if="contraledSpans.length>4" class="testBtnConral">
                    <el-button type="primary" class="dArrowLeft" @click="selectLeftImg"
                        :class="{ asFormer: Datas.toLeft }">
                          <!--上一张按钮图片 -->     
                      <img :src="leftImg" alt="" style="width: 30px;height:30px;">
                    </el-button>
                    <span v-for="(item, index) in Datas.beInterceptedArr" :key="index">
                        <<a-image style="display:inline-block;width:140px;height: 72px;" :src="item.url"
                            @click="getImg(index)" />
                    </span>
                    <el-button type="primary" class="dArrowRight" @click="selectRightImg"
                        :class="{ asLast: Datas.toRight }">
                          <!--下一张按钮图片 -->   
                     <img :src="rightImg" style="width: 30px;height:30px;" alt="" />
                    </el-button>
                </div>
             <!-- 图片长度少于4张显示这个div -->     
                <div v-else class="imgBox">
                    <a-image v-for="(item,index) in contraledSpans" :key="item.id" :src="item.url"
                        @click="getImg(index)"
                        style="display:inline-block;width:120px;height: 72px;margin-right: 10px;" />
                </div>

js部分

//轮播图
let Datas: any = reactive({
    //向右按钮显隐
    toLeft: true,
    //向左按钮显隐
    toRight: false,
    //被截取元素的暂存数组
    beInterceptedArr: []
})
//原数组
var contraledSpans: any = ref([])
//所有图片
 contraledSpans.value = [
    { id: '1', url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' },
    { id: '2', url: 'https://aliyuncdn.antdv.com/vue.png' },
    { id: '3', url: 'https://aliyuncdn.antdv.com/logo.png' },
    { id: '4', url: 'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp' },
    { id: '5', url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' }
  ]
   //如果图片长度大于4就用轮播图显示
  if (contraledSpans.value.length > 4) {
    //先加载一组
    Datas.beInterceptedArr = contraledSpans.value.slice(0, 4);
    a();
  }
const a = () => {
    //原数组长度不大于4不显示向右按钮
    if (contraledSpans.value.length <= 4) {
        Datas.toRight = true
    }
}
//点击向右按钮
const selectRightImg = () => {
    //找到上一组数组的第一个元素在原数组的位置
    var index = contraledSpans.value.findIndex((arr: any) => arr.id === Datas.beInterceptedArr[0].id)
    //判断最后一组只剩三个元素则不再继续切割
    if (index + 4 <= contraledSpans.value.length) {
        //根据上述位置往后挪一个存入截取数组
        Datas.beInterceptedArr = contraledSpans.value.slice(index + 1, index + 5)
        //到最后只有三个元素的元素组时，关闭往右按钮
        if (Datas.beInterceptedArr.length === 3) {
            Datas.toRight = true
        }
        //没有到开头位置，打开向左按钮
        if (Datas.beInterceptedArr[0] !== contraledSpans.value[0]) {
            Datas.toLeft = false
        }
    }
}

// 点击向左按钮
const selectLeftImg = () => {
    // 找到上面向右操作后暂存数组中第一个元素，到元数组中去匹配，找到此元素下标
    var index = contraledSpans.value.findIndex((arr: any) => arr.id === Datas.beInterceptedArr[0].id)
    if (index >= 1) {
        //得到下标后往前移一个下标，此下标则是暂存数组中第一个元素
        Datas.beInterceptedArr = contraledSpans.value.slice(index - 1, index + 3)
        //没有到最后只有三个元素的元素组时，打开往右按钮
        if (Datas.beInterceptedArr.length == 4) {
            Datas.toRight = false
        }
    }
    //到开头位置，关闭向左按钮
    if (Datas.beInterceptedArr[0] === contraledSpans.value[0]) {
        Datas.toLeft = true
    }
}
//获取当前图片索引
const getImg = (val: any) => {
    console.log(val)
}

效果： 点击左右按钮可实现走马灯效果