jquery 个人网站,上海装修公司招聘施工队长,wordpress core,转播新闻联播过程一套项目需要实现如上图所示的轮播图。 实现思路#xff1a; 1.项目引入使用普通轮播图。 2.根据轮播图个数#xff0c;动态给可视范围的第一个轮播图和最后一个轮播图添加样式。 代码实现#xff1a; 经调研#xff0c;使用slick轮播图#xff08;官网地址 https://kenwheel…项目需要实现如上图所示的轮播图。 实现思路 1.项目引入使用普通轮播图。 2.根据轮播图个数动态给可视范围的第一个轮播图和最后一个轮播图添加样式。 代码实现 经调研使用slick轮播图官网地址 https://kenwheeler.github.io/slick/ 1.点击下载插件包 将其放到staic文件夹下在vue项目中index.html文件中引入js和css。 注意还需要额外引入jquery。 2.页面使用。 html
div idautoplayClass1div :class[slideItemWrapper, slideItemWrapperindex , slideItemWrapperCenter] v-for(item,index) in lunbo1List :keyindex :titleitem.fileNameimg :srchAction item.filePath classinage 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)
