vue实现分组轮播（一排放4个小的 无缝滚动 跑马灯效果）

前段时间写了个无缝滚动轮播图，有小伙伴评论说，想要一行放几个小的应该怎么实现，现在他来了，在原有无缝滚动轮播图的基础上，小小改动便能实现需求，纯vue不依赖任何第三方插件，复制粘贴即刻使用，话不多说，直接上效果图+代码！

​​<template><div id="app"><div class="SwiperBox" @mouseenter="MouseFun('移入')" @mouseleave="MouseFun('移出')"><!-- 图片 --><div class="imgBox" :style="{left:`-${leftVal}px`,transition:`${ition}s`}"><div v-for="(item,index) in imgList" :key="index"><img :src="items.imgUrl" alt="" v-for="(items,indexs) in item" :key="indexs"></div><!-- 复制第一张放到最后,以实现无缝无线循环滚动效果 --><div><img :src="items.imgUrl" alt="" v-for="(items,indexs) in imgList[0]" :key="indexs"></div></div><!-- 左箭头按钮 --><div class="leftBtn" @click="throttle(PrevFun)">&larr;</div><!-- 右箭头按钮 --><div class="rightBtn" @click="throttle(NextFun)">&rarr;</div><!-- 下方指示点容器 --><div class="instBox"><div @click="instFun(index)" v-for="(item,index) in imgList.length" :key="index":class="['inst',index==imgShow?'instActv':'']"></div></div></div></div></template>

<script>export default {data() {return {imgData: [{imgUrl: "/pop/s590x470_jfs/t1/107362/20/24177/90602/6233decdE5627d944/b7194e538e3c8c7a.jpg"},{imgUrl: "/pop/s590x470_jfs/t1/204028/36/25480/101429/62f507a7Ec62b0cd3/db5984ae24ce0212.jpg"},{imgUrl: "/ling4/100022552927/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e6/075268d0/cr/s/q.jpg"},{imgUrl: "/ling4/100026667910/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e3/d7b3695b/cr/s/q.jpg"},{imgUrl: "/pop/s590x470_jfs/t1/88/25/23710/64955/62f070fdE95cb4f47/22b916d938a43bb5.jpg"},{imgUrl: "/babel/s590x470_jfs/t1/147050/6/31926/85670/6357a9afE26ff5c66/3a6823f7820fb72b.jpg"},{imgUrl: "/ling4/100003547337/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa3b/52f28740/cr/s/q.jpg"},{imgUrl: "/ling4/100038004353/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa4b/665a2335/cr/s/q.jpg"},{imgUrl: "/ling4/100005483298/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa42/0c491f4f/cr/s/q.jpg"},{imgUrl: "/ling4/100038004353/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa4b/665a2335/cr/s/q.jpg"},],leftVal:0, // 轮播图盒子的偏移值flag:true, // 用来节流防止重复点击jstart:null, // 自动执行下一张定的时器imgWidth:500, // 在这里填写你需要的图片宽度ition:0.8, // 设置轮播图过度时间imgShow:0, // 表示当前显示的图片索引};},computed:{imgList() { // 数组分割let arr = [];let num = 4 // 填写需要分割成几个一组的数量if (this.imgData.length) {for (let i = 0; i < this.imgData.length; i += num) {arr.push(this.imgData.slice(i, i + num));}}return arr;},},mounted() {this.奥力给() // 偷偷告诉大家一个小秘密,JavaScript是原生支持中文命名函数或变量的哦},methods: {// 这里定义一个鼠标移入移出事件，鼠标悬停时停止自动轮播，鼠标移出则重新执行自动轮播MouseFun(type){// 停止定时器 // 重新执行定时器type=='移入'?clearTimeout(this.start):this.奥力给()},// 此为自动轮播定时器奥力给(){this.start = setInterval(()=>{this.NextFun()},1500)},// 这里通过额外封装的节流函数触发 PrevFun() 和 NextFun(),以达到防止重复点击的效果throttle(fun) {if (this.flag) {this.flag = false;fun(); // 此为模板中传递进来的PrevFun()或NextFun()函数setTimeout(() => {this.flag = true;}, 1200); // 节流间隔时间}},// 上一张PrevFun(){if(this.leftVal==0){ // 判断显示的图片 是 第一张时执行// this.imgList.length是指循环图片数组的图片个数this.ition=0 // 将过渡时间变成0，瞬间位移到最后一张图this.imgShow=this.imgList.length-1 // 将高亮小点改为最后一张图this.leftVal=(this.imgList.length)*this.imgWidth // 瞬间移动setTimeout(()=>{ // 通过延时障眼法,归原过渡时间,执行真正的“上一张”函数this.ition=0.8this.leftVal -= this.imgWidth},this.ition*1000)}else{ // 判断显示的图片 不是 第一张时执行this.ition=0.8this.leftVal -= this.imgWidththis.imgShow--}},// 下一张NextFun(){if(this.leftVal==(this.imgList.length-1)*this.imgWidth){ // 判断显示的图片 是 最后一张时执行this.ition=0.8this.leftVal+=this.imgWidththis.imgShow=0setTimeout(()=>{this.ition=0this.leftVal=0},this.ition*1000)}else{ // 判断显示的图片 不是 最后一张时执行this.ition=0.8this.leftVal+=this.imgWidththis.imgShow++}},// 点击小圆点instFun(index){this.ition=0.8this.leftVal=index*this.imgWidththis.imgShow=index},}};</script>

<style>/* 图片容器样式 */.SwiperBox {position: relative;width: 500px;height: 300px;box-sizing: border-box;cursor: pointer;overflow: hidden;border: 1px solid #eee;}.imgBox{position: absolute;top: 0px;left: 0px;min-width: 500px;height: 300px;display: flex;justify-content: flex-start;}/* 图片默认样式 */.imgBox div {flex-shrink: 0;width: 500px;height: 300px;display: flex;justify-content: space-around;align-items: center;}.imgBox div img{width: 80px;height: 160px;}/* 两个按钮共有的样式,也可直接使用箭头图片替代 */.leftBtn,.rightBtn {position: absolute;top: 50%;transform: translateY(-50%);width: 30px;height: 30px;display: flex;justify-content: center;align-items: center;background: rgba(109, 109, 109, 0.445);color: #fff;border-radius: 50%;cursor: pointer;font-size: 12px;font-weight: 500;}.leftBtn {left: 10px;}.rightBtn {right: 10px;}/* 下方指示器盒子 */.instBox{position: absolute;left: 50%;transform: translateX(-50%);bottom: 10px;display: flex;}/* 小圆点 */.inst{width: 10px;height: 10px;border: 1px solid #ccc;margin-right: 8px;background: #fff;border-radius: 50%;cursor: pointer;}.inst:last-child{margin-right: 0px;}.instActv{border: 1px solid #ff0000;background: #ff0000;}#app{width: 100%;padding: 120px;display: flex;justify-content: center;padding:80px 0px;}</style>