广州 网站 建设 制作北京网站托管

项目需要实现如上图所示的轮播图。
实现思路：
1.项目引入使用普通轮播图。
2.根据轮播图个数，动态给可视范围的第一个轮播图和最后一个轮播图添加样式。
代码实现：
经调研，使用slick轮播图（官网地址  https://kenwheeler.github.io/slick/）
1.点击下载插件包

将其放到staic文件夹下，在vue项目中，index.html文件中引入js和css。

注意：还需要额外引入jquery。
2.页面使用。
html：

<div id="autoplayClass1"><div :class="['slideItemWrapper', 'slideItemWrapper'+index , 'slideItemWrapperCenter']" v-for="(item,index) in lunbo1List"  :key="index"   :title="item.fileName"><img :src="hAction + item.filePath" class="inage  inagex" /></div></div>

lunbo1List为后端返回的图片列表。
js：

 autoPlaySlide(){//slideItemWrapperFirst为第一个轮播图的样式，slideItemWrapperLast为最后一个轮播图的样式。//slideItemWrapperCenter为默认轮播图样式$(".slideItemWrapper0").addClass('slideItemWrapperFirst')$(".slideItemWrapper4").addClass('slideItemWrapperLast')//轮播设置$('#autoplayClass1').slick({slidesToShow: 5,    slidesToScroll: 1,  //每次轮播个数autoplay: true,autoplaySpeed: 2000,});//轮播change时，样式动态添加      $('#autoplayClass1').on('beforeChange', function (event, slick, currentSlide, nextSlide) {$('.slideItemWrapper' + nextSlide).removeClass('slideItemWrapperCenter')$('.slideItemWrapper' + nextSlide).addClass('slideItemWrapperFirst')let lastRotate = nextSlide + 4if (lastRotate > lunboList.length-1) {lastRotate = lastRotate - lunboList.length}$('.slideItemWrapper' + lastRotate).removeClass('slideItemWrapperCenter')$(".slideItemWrapper" + lastRotate).addClass('slideItemWrapperLast')$(".slideItemWrapper" + currentSlide).removeClass('slideItemWrapperFirst')$('.slideItemWrapper' + currentSlide).addClass('slideItemWrapperCenter')let lastRotatel = currentSlide + 4if (lastRotatel > lunboList.length-1) {lastRotatel = lastRotatel - lunboList.length}$(".slideItemWrapper" + lastRotatel).removeClass('slideItemWrapperLast')$('.slideItemWrapper' + lastRotatel).addClass('slideItemWrapperCenter')});},

css：实现异性样式

   //最左侧图片形状处理.slideItemWrapperFirst {position: relative;width: 17vw;/* 或你需要的宽度 */height: 20vh;/* 或你需要的高度 */display: inline-block;}.slideItemWrapperFirst::after {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;//   background: white; /* 这是图片背景色，根据实际情况调整 */z-index: 1;}.slideItemWrapperFirst img {width: 14.6;height: 15.5vh;position: relative;z-index: 2;}.slideItemWrapperFirst img {clip-path: polygon(0 0, calc(100%) 0, calc(100%) calc(100% - 3.5vh), 0 calc(100%));/* 10px 是缺失角的宽度，根据需求调整 */}//最右侧图片形状处理.slideItemWrapperLast {position: relative;width: 17vw;height: 20vh;display: inline-block;}.slideItemWrapperLast::after {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;//   background: white; /* 这是图片背景色，根据实际情况调整 */z-index: 1;}.slideItemWrapperLast img {width: 14.6;height: 15.5vh;position: relative;z-index: 2;}//关键代码clip-path:：.slideItemWrapperLast img {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3.5vh));/* 10px 是缺失角的宽度，根据需求调整 */}

如何页面有多个轮播图同时使用，需要销毁的话：
 $('#autoplayClass1').slick('unslick')