当前位置: 首页 > news >正文

实现异形(拱形)轮播图

项目需要实现如上图所示的轮播图。
实现思路:
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')

相关文章:

实现异形(拱形)轮播图

项目需要实现如上图所示的轮播图。 实现思路&#xff1a; 1.项目引入使用普通轮播图。 2.根据轮播图个数&#xff0c;动态给可视范围的第一个轮播图和最后一个轮播图添加样式。 代码实现&#xff1a; 经调研&#xff0c;使用slick轮播图&#xff08;官网地址 https://kenwheel…...

【软件测试】2024年职业院校技能大赛高职组“软件测试”赛项样题

目录 任务一&#xff1a;功能测试&#xff08;45 分&#xff09; 任务二&#xff1a;自动化测试&#xff08;15 分&#xff09; 任务三&#xff1a;性能测试&#xff08;15 分&#xff09; 任务四&#xff1a;单元测试&#xff08;10 分&#xff09; 任务五&#xff1a;接…...

python数组和队列

一、数组 如果一个列表只包含数值&#xff0c;那么使用array.array会更加高效&#xff0c;数组不仅支持所有可变序列操作&#xff08;.pop、.insert、.extent等&#xff09;&#xff0c;而且还支持快速加载项和保存项的方法&#xff08;.fromfile、.tofile等&#xff09; 创建…...

Vision Transformer(ViT)一种将Transformer架构应用于计算机视觉领域的模型

Vision Transformer&#xff08;ViT&#xff09;是一种将Transformer架构应用于计算机视觉领域的模型&#xff0c;它通过自注意力机制处理图像数据&#xff0c;与传统的卷积神经网络&#xff08;CNN&#xff09;相比&#xff0c;ViT能够更好地捕捉全局依赖关系。以下是对ViT的详…...

得到任务式 大模型应用开发学习方案

根据您提供的文档内容以及您制定的大模型应用开发学习方案&#xff0c;我们可以进一步细化任务式学习的计划方案。以下是具体的任务式学习方案&#xff1a; 任务设计 初级任务 大模型概述&#xff1a;阅读相关资料&#xff0c;总结大模型的概念、发展历程和应用领域。深度学…...

使用el-menu跳转时偶尔会出现路由已经变了,但是页面却显示空白的情况

刚开始我以为是我数据加载的问题&#xff0c;后来又看有人说是template里不能包多个div&#xff0c;但我去看我出错的组件&#xff0c;并没有出现两个div。 后来我就把每个都给改了&#xff0c;即使是elemen-ui的标签也全部改在一个div里&#xff0c;就发现没问题了。 我改的…...

C语言家教记录(七)

C语言家教记录&#xff08;七&#xff09; 导语字符串字面量变量读写字符串操作函数惯用法数组 结构联合枚举总结与复习 导语 本次授课的内容如下&#xff1a;字符串&#xff0c;结构体、联合体、枚举 辅助教材为 《C语言程序设计现代方法&#xff08;第2版&#xff09;》 字…...

【数据结构】——十大排序详解分析及对比

【数据结构】——十大排序详解分析及对比 文章目录 【数据结构】——十大排序详解分析及对比前言1. 排序的概念及其运用1.1 排序的概念1.2 排序的应用 2. 插入排序2.1 直接插入排序2.2 希尔排序 3. 选择排序3.1 选择排序3.2 堆排序 4 交换排序4.1 冒泡排序4.2 快速排序4.2.1 霍…...

散点图适用于什么数据 thinkcell散点图设置不同颜色

在数据可视化的众多工具和技巧中&#xff0c;散点图是一种极为有效的方式&#xff0c;能够揭示变量之间的关系&#xff0c;尤其是在探索数据集的相关性、分布趋势、集群现象时。而在众多助力于制作高质量散点图的工具中&#xff0c;think-cell插件以其高效的操作和丰富的功能&a…...

1. windows搭建Kafka教程

目录 1. 部署zookeeper 1.1 下载地址 1.3 修改zoo配置 1.4 启动zookeepe服务 02 部署kafka 2.1 下载组件包 2.2 解压安装包 2.3 修改配置 2.4 启动kafka服务端 1. 部署zookeeper 1.1 下载地址 下载地址: kafka/zookeeper 下载地址 (qq.com) 1.2 解压 &#xff08;…...

XSS复现

目录 XSS简单介绍 一、反射型 1、漏洞逻辑&#xff1a; 为什么有些标签可以触发&#xff0c;有些标签不能触发 可以触发的标签 不能触发的标签 为什么某些标签能触发而某些不能 二、DOM型 1、Ma Spaghet! 要求&#xff1a; 分析&#xff1a; 结果&#xff1a; 2、J…...

怎么利用XML发送视频彩信

传统的短信推广主要以文字为主&#xff0c;用户接收到的信息往往显得单调乏味。而视频彩信则不同&#xff0c;它结合了视频和音频的优势&#xff0c;通过生动的画面和悦耳的音乐&#xff0c;给用户带来强烈的视听冲击&#xff0c;从而极大地提高了用户的吸引力。 XML成功返回示…...

5G+工业互联网产教融合创新实训室解决方案

一、建设背景 随着第五代移动通信技术&#xff08;5G&#xff09;的快速普及和工业互联网的迅猛发展&#xff0c;全球制造业正面临着前所未有的深刻变革。5G技术凭借其超高的传输速率、极低的延迟以及大规模的连接能力&#xff0c;为工业自动化、智能制造等领域带来了革命性的…...

象棋布局笔记

文章目录 布局中炮(当头炮)当头炮的缺点如何应对平车压马平炮对车的理解中炮对屏风马急进中兵 中炮盘头马盘头马两翼突破 盖马三锤 反宫马克制反宫马 顺手炮 士角炮56炮破解56炮 小当头 屏风马7卒分支3卒分支屏风马红车二进六败招(黑未挺7卒前直接进车)马八进九变车三退一变马二…...

百度AI智能云依赖库OpenSSL库和Curl库及jsoncpp库安装

开发百度AI项目时&#xff0c;需要用到https协议&#xff0c;因此需要安装OpenSSl和curl库。 若只安装curl库&#xff0c;只支持http协议&#xff0c;不支持https协议。此外&#xff0c;还需要jsoncpp库&#xff0c;用以组包及解析与百度AI通信的json格式协议。 1.Ubuntu上安装…...

智慧空调离线语音控制方案:NRK3301芯片的深度解析与应用

随着AI技术的大爆发和智能家居的风潮&#xff0c;语音交互已成为智能家居产品的一项必备技能&#xff0c;在家电、音箱、穿戴设备乃至墙壁开关等贴近生活的产品中应用越来越广泛&#xff0c;智能语音识别是当前最热门的方案之一。 九芯智能顺应家居行业智能语音交互市场需求&a…...

基础第3关:LangGPT结构化提示词编写实践

提示词&#xff1a; # Role: 伟大的数学家 ## Profile - author: LangGPT - version: 1.0 - language: 中文 - description: 一个伟大的数学家&#xff0c;能够解决任何的数学难题 ## Goals: 根据关键词进行描述&#xff0c;避免与已有描述重复。 ## Background: 你正在被…...

Nginx系列-负载均衡

文章目录 Nginx系列-负载均衡1. 负载均衡基础1.1 负载均衡定义1.2 Nginx负载均衡原理 2. 负载均衡策略2.1 轮询&#xff08;Round Robin&#xff09;2.2 加权轮询&#xff08;Weighted Round Robin&#xff09;2.3 IP哈希&#xff08;IP Hash&#xff09;2.4 最少连接&#xff…...

中职物联网实训室

一、中职物联网实训室建设背景 在当今科技日新月异的浪潮中&#xff0c;物联网技术以其迅猛的发展势头&#xff0c;成为了撬动数字化转型的关键杠杆&#xff0c;深刻地重塑着经济社会的面貌。面对这一变革&#xff0c;社会对精通物联网技术的应用型人才需求激增。鉴于此&#x…...

Image-coloring的部署,在Ubuntu22.04系统下——点动科技

一、ubuntu22.04基本环境配置 1.1 更换清华Ubuntu镜像源 删除原来的文件 rm /etc/apt/sources.list开始编辑新文件 vim /etc/apt/sources.list先按i键&#xff0c;粘贴以下内容 # 默认注释了源码镜像以提高 apt update 速度&#xff0c;如有需要可自行取消注释 deb https:…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

HarmonyOS运动开发:如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

MinIO Docker 部署:仅开放一个端口

MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...

Caliper 配置文件解析:fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文通过代码驱动的方式&#xff0c;系统讲解PyTorch核心概念和实战技巧&#xff0c;涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...