前端原生写自定义旋转变换轮播图

html部分：

 

<div class="banner_box"><div class="swiperWrapper" v-show="bannerList.length>0"><div class="swiper-item" :id="`swiperSlide${index}`" :class="{'active':index==0,'next':index==1,'prev':index==2}" @click="swiperChange(item,index)" v-for="(item,index) in bannerList" :key="index"><img class="bus_img" style="width:100%;height:auto;max-width: 1200px;" :src="item.img_url"><div class="txt_box txtBox" :class="{'txtBox_active':item.active}" ><p class="f_t_16 desc" v-html="item.desc"></p><p class="f_t_20 title">{{ item.title }}</p></div></div><div class="dot"><i class="el-icon-arrow-left icon-prev" @click="swiperButtonChange('prev')"></i><div v-for="(item,index) in bannerList" :key="index" :class="{'active':item.active}" @click="swiperChange(item,index)"></div><i class="el-icon-arrow-right icon-next" @click="swiperButtonChange('next')"></i></div></div>
</div>

css部分：

/* 自定义轮播图样式 */
.banner_box{    width: 1100px;height: 856px;margin: 100px auto -70px auto;position: relative;box-sizing: border-box;
}
.swiper-item{transition: bottom 1s ease-in-out,left 1s ease-in-out,width 1s ease-in-out,height 1s ease-in-out,z-index 0s linear 1s;cursor: pointer;position: absolute;
}
.swiperWrapper{height: 100%;
}
.swiperWrapper .active{bottom: 380px;left: 215px;z-index: 10;width: 883px;height: 464px;
}
.swiperWrapper .next{bottom: 170px;left: 7%;z-index: 20;width: 386px;height: 257px;
}
.swiperWrapper .prev{bottom: 360px;left: 0%;z-index: 30;width: 194px;height: 130px;
}
.txtBox{bottom: 9%;line-height: unset;width: 36.9%;background-color: #FFFFFF;position: absolute;right: 5%;padding: 20px 24px;box-sizing: border-box;font-size: 24px;color: #004388;text-align: left;
}
.txtBox{opacity: 0;visibility: hidden;right: 30px;bottom: -90px;width: 575px;
}
.txtBox_active{visibility: visible;opacity: 1;transition: all .6s ease-in-out 1s;
}
.txtBox .title{font-size: 20px;font-family: theSans;font-weight: 500;color: #333333;}
.txtBox .desc{font-size: 16px;font-family: SourceHanSansSC-Medium, SourceHanSansSC;font-weight: 500;color: #004388;margin-bottom: 39px;}
.newPointer{transform: translate(160px,315px);
}
.dot{width: 120px;height: 20px;position: absolute;left: 44%;bottom: 220px;display: flex;justify-content: space-between;align-items: center;
}
.dot>div{width: 10px;height: 10px;border-radius: 50%;background-color: #004387;transition: background-color 0.3s ease-in-out;cursor: pointer;
}
.dot>div:hover{background-color: #02A6E3;transition: background-color 0.3s ease-in-out;
}
.dot .active{width: 10px;height: 10px;background-color: #02A6E3;transition: background-color 0.3s ease-in-out;
}.dot .icon-prev,.dot .icon-next{font-weight: bold;color: #02A6E3;font-size: 18px;cursor: pointer;
}

js部分：

data定义bannerList：

// 轮播图列表
bannerList: []

获取轮播图数据：

this.bannerList = res.data.chart;
this.bannerList.forEach((item,index)=>{item.active = index == 0;
});

轮播图方法：

/*** 轮播图点击*/
swiperChange(item,index){let activeIndex = this.bannerList.findIndex(item => item.active == true);// 如果选中的是当前active的无效果if (index == activeIndex) return false;let swiper0 = document.getElementById(`swiperSlide0`); let swiper1 = document.getElementById(`swiperSlide1`); let swiper2 = document.getElementById(`swiperSlide2`); let swiper = document.getElementById(`swiperSlide${index}`);let classList = [...swiper.classList];this.bannerList.map(item=>{return item.active = false;});if (index == 0 && classList.includes('next')) {swiper0.classList.remove('next');swiper0.classList.add('active');swiper1.classList.remove('prev');swiper1.classList.add('next');swiper2.classList.remove('active');swiper2.classList.add('prev');this.bannerList[0].active = true;this.$set(this.bannerList,0,{ ...this.bannerList[0], active: true });this.$set(this.bannerList,1,{ ...this.bannerList[1], active: false });this.$set(this.bannerList,2,{ ...this.bannerList[2], active: false });} else if (index == 0 && classList.includes('prev')) {swiper0.classList.remove('prev');swiper0.classList.add('active');swiper1.classList.remove('active');swiper1.classList.add('next');swiper2.classList.remove('next');swiper2.classList.add('prev');this.bannerList[0].active = true;this.$set(this.bannerList,0,{ ...this.bannerList[0], active: true });this.$set(this.bannerList,1,{ ...this.bannerList[1], active: false });this.$set(this.bannerList,2,{ ...this.bannerList[2], active: false });} else if (index == 1 && classList.includes('next')) {swiper0.classList.remove('active');swiper0.classList.add('prev');swiper1.classList.remove('next');swiper1.classList.add('active');swiper2.classList.remove('prev');swiper2.classList.add('next');this.bannerList[1].active = true;this.$set(this.bannerList,0,{ ...this.bannerList[0], active: false });this.$set(this.bannerList,1,{ ...this.bannerList[1], active: true });this.$set(this.bannerList,2,{ ...this.bannerList[2], active: false });} else if (index == 1 && classList.includes('prev')) {swiper0.classList.remove('next');swiper0.classList.add('prev');swiper1.classList.remove('prev');swiper1.classList.add('active');swiper2.classList.remove('active');swiper2.classList.add('next');this.bannerList[1].active = true;this.$set(this.bannerList,0,{ ...this.bannerList[0], active: false });this.$set(this.bannerList,1,{ ...this.bannerList[1], active: true });this.$set(this.bannerList,2,{ ...this.bannerList[2], active: false });} else if (index == 2 && classList.includes('next')) {swiper0.classList.remove('prev');swiper0.classList.add('next');swiper1.classList.remove('active');swiper1.classList.add('prev');swiper2.classList.remove('next');swiper2.classList.add('active');this.bannerList[2].active = true;this.$set(this.bannerList,0,{ ...this.bannerList[0], active: false });this.$set(this.bannerList,1,{ ...this.bannerList[1], active: false });this.$set(this.bannerList,2,{ ...this.bannerList[2], active: true });} else if (index == 2 && classList.includes('prev')) {swiper0.classList.remove('active');swiper0.classList.add('next');swiper1.classList.remove('next');swiper1.classList.add('prev');swiper2.classList.remove('prev');swiper2.classList.add('active');this.bannerList[2].active = true;this.$set(this.bannerList,0,{ ...this.bannerList[0], active: false });this.$set(this.bannerList,1,{ ...this.bannerList[1], active: false });this.$set(this.bannerList,2,{ ...this.bannerList[2], active: true });}
},
/*** 前进和后退点击*/
swiperButtonChange(type){let swiper0 = document.getElementById(`swiperSlide0`); let swiper1 = document.getElementById(`swiperSlide1`); let swiper2 = document.getElementById(`swiperSlide2`); let classList = [...swiper0.classList];this.bannerList.map(item=>{return item.active = false;});// 以第一张图片为基准判断if (type == 'prev') {if (classList.includes('active')) {swiper0.classList.remove('active');swiper0.classList.add('next');swiper1.classList.remove('next');swiper1.classList.add('prev');swiper2.classList.remove('prev');swiper2.classList.add('active');this.bannerList[2].active = true;this.$set(this.bannerList,0,{ ...this.bannerList[0], active: false });this.$set(this.bannerList,1,{ ...this.bannerList[1], active: false });this.$set(this.bannerList,2,{ ...this.bannerList[2], active: true });} else if (classList.includes('next')) {swiper0.classList.remove('next');swiper0.classList.add('prev');swiper1.classList.remove('prev');swiper1.classList.add('active');swiper2.classList.remove('active');swiper2.classList.add('next');this.bannerList[1].active = true;this.$set(this.bannerList,0,{ ...this.bannerList[0], active: false });this.$set(this.bannerList,1,{ ...this.bannerList[1], active: true });this.$set(this.bannerList,2,{ ...this.bannerList[2], active: false });} else if (classList.includes('prev')) {swiper0.classList.remove('prev');swiper0.classList.add('active');swiper1.classList.remove('active');swiper1.classList.add('next');swiper2.classList.remove('next');swiper2.classList.add('prev');this.bannerList[0].active = true;this.$set(this.bannerList,0,{ ...this.bannerList[0], active: true });this.$set(this.bannerList,1,{ ...this.bannerList[1], active: false });this.$set(this.bannerList,2,{ ...this.bannerList[2], active: false });}} else if (type == 'next') {if (classList.includes('active')) {swiper0.classList.remove('active');swiper0.classList.add('prev');swiper1.classList.remove('next');swiper1.classList.add('active');swiper2.classList.remove('prev');swiper2.classList.add('next');this.bannerList[1].active = true;this.$set(this.bannerList,0,{ ...this.bannerList[0], active: false });this.$set(this.bannerList,1,{ ...this.bannerList[1], active: true });this.$set(this.bannerList,2,{ ...this.bannerList[2], active: false });} else if (classList.includes('next')) {swiper0.classList.remove('next');swiper0.classList.add('active');swiper1.classList.remove('prev');swiper1.classList.add('next');swiper2.classList.remove('active');swiper2.classList.add('prev');this.bannerList[0].active = true;this.$set(this.bannerList,0,{ ...this.bannerList[0], active: true });this.$set(this.bannerList,1,{ ...this.bannerList[1], active: false });this.$set(this.bannerList,2,{ ...this.bannerList[2], active: false });} else if (classList.includes('prev')) {swiper0.classList.remove('prev');swiper0.classList.add('next');swiper1.classList.remove('active');swiper1.classList.add('prev');swiper2.classList.remove('next');swiper2.classList.add('active');this.bannerList[2].active = true;this.$set(this.bannerList,0,{ ...this.bannerList[0], active: false });this.$set(this.bannerList,1,{ ...this.bannerList[1], active: false });this.$set(this.bannerList,2,{ ...this.bannerList[2], active: true });}}
}

 轮播图数据结构：

[{"id": 44,"title": "李刚，班组长","img_url": "http://cdn.juplus.cn/FhR4NNaOEHIsn2Uz-KePR3I1A4No","desc": "“在科德宝工作意味着拥有自由并设定可持续发展足迹。”","subtitle": null,"video_url": null,"subtitle1": null,"type": 3,"create_time": "2023-08-11 09:14:59","sort": 1,"active": true},{"id": 43,"title": "利里奥（Lirio），销售主管","img_url": "http://cdn.juplus.cn/FhLtUKcYxOLwQrabkylp5jV2RGap","desc": "“我为在这里工作感到自豪，因为我在职业生涯中有很多发展机会。”","subtitle": null,"video_url": null,"subtitle1": null,"type": 3,"create_time": "2023-08-11 09:14:20","sort": 2,"active": false},{"id": 56,"title": "达伦（Darren），销售主管","img_url": "http://cdn.juplus.cn/Fls4sM6DPjgV0gxbHc59torADFZD","desc": "“科德宝一直求才若渴，我们理想的人才求知欲强，积极主动，希望获得成长和发展个人技能。”","subtitle": null,"video_url": null,"subtitle1": null,"type": 3,"create_time": "2023-08-17 13:31:55","sort": 3,"active": false}
]

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/93689.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

简单易懂的 Postman Runner 参数自增教程

简单易懂的 Postman Runner 参数自增教程

目录 什么是 Postman Runner&#xff1f; Postman Runner 如何实现参数自增&#xff1f; 步骤一&#xff1a;设置全局参数 步骤二&#xff1a;将全局参数带入请求参数 步骤三&#xff1a;实现参数自增 资料获取方法 什么是 Postman Runner&#xff1f; Postman Runner 是…
阅读更多...
docker的网络模式

docker的网络模式

docker0网络 docker容器的 虚拟网关loopback &#xff1a;回环网卡、TCP/IP网卡是否生效virtual bridge&#xff1a;linux 自身继承了一个虚拟化功能&#xff08;kvm架构&#xff09;&#xff0c;是原生架构的一个虚拟化平台&#xff0c;安装了一个虚拟化平台之后就会系统就会自…
阅读更多...
Linux —— 文件系统

Linux —— 文件系统

目录 一&#xff0c;背景 二&#xff0c;文件系统 一&#xff0c;磁盘简介 磁盘分为SSD、机械磁盘&#xff1b;机械磁盘&#xff0c;即磁盘高速转动&#xff0c;磁头移动到读写扇区所在磁道&#xff0c;让磁头在目标扇区上划过&#xff0c;即可完成对扇区的读写操作&#xff…
阅读更多...
web后端解决跨域问题

web后端解决跨域问题

目录 什么是跨域问题 为什么限制访问 解决 什么是跨域问题 域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。但是一般情况下不能这么做&#xff0c;它是由浏览器的同源策略造成的&#xff0c;是浏览器对js施加的安全…
阅读更多...
【C++起飞之路】类和对象 —— 类

【C++起飞之路】类和对象 —— 类

类 ~ ~ ~ 一、面向过程和面向对象初步认识a. 面向过程编程b. 面向对象编程例如&#xff1a;无人机送货系统1、面向过程编程方式2、面向对象编程方式 二、类的引入1、定义类的关键字2、栈的手动实现a. C语言实现栈b. C实现栈 三、类的定义类的两种定义方式&#xff1a; 四、类的…
阅读更多...
基于IMX6ULLmini的linux裸机开发系列一：汇编点亮LED

基于IMX6ULLmini的linux裸机开发系列一：汇编点亮LED

思来想去还是决定记录一下点灯&#xff0c;毕竟万物皆点灯嘛 编程步骤 使能GPIO时钟 设置引脚复用为GPIO 设置引脚属性(上下拉、速率、驱动能力) 控制GPIO引脚输出高低电平 使能GPIO时钟 其实和32差不多 先找到控制LED灯的引脚&#xff0c;也就是原理图 文件名 C:/Us…
阅读更多...
使用vscode进行远程调试

使用vscode进行远程调试

官方调试手册&#xff1a;vscode官方调试手册 1.安装python扩展 如果是远程连接的话&#xff0c;一定要在ssh上启用扩展。不然创建基于python的配置文件时就会提示&#xff0c;无python扩展。 2.新建配置文件&#xff0c;并修改参数 点击左侧第四个按钮&#xff0c;运行与调试…
阅读更多...
k8s v1.27.4二进制部署记录

k8s v1.27.4二进制部署记录

记录二进制部署过程 #!/bin/bash#升级内核 update_kernel() {rpm --import https://www.elrepo.org/RPM-GPG-KEY-elrepo.orgyum -y install https://www.elrepo.org/elrepo-release-7.el7.elrepo.noarch.rpmyum --disablerepo"*" --enablerepo"elrepo-kernel&q…
阅读更多...
Swagger-ui在idea中的使用

Swagger-ui在idea中的使用

1.添加依赖 <!--添加swagger2相关概念--><dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>2.9.2</version></dependency><!--添加swagger-ui相关功能--><de…
阅读更多...
浅谈Spring与字节码生成技术

浅谈Spring与字节码生成技术

概要 今天来谈一谈我们熟知的Spring框架和字节码技术有什么联系。 Java程序员几乎都了解Spring。 它的IoC&#xff08;依赖反转&#xff09;和AOP&#xff08;面向切面编程&#xff09;功能非常强大、易用。而它背后的字节码生成技术&#xff08;在运行时&#xff0c;根据需要…
阅读更多...
带你了解—使用内网穿透，公网远程访问本地硬盘文件

带你了解—使用内网穿透，公网远程访问本地硬盘文件

文章目录 前言1. 下载cpolar和Everything软件3. 设定http服务器端口4. 进入cpolar的设置5. 生成公网连到本地内网穿透数据隧道 总结 前言 随着云概念的流行&#xff0c;不少企业采用云存储技术来保存办公文件&#xff0c;同时&#xff0c;很多个人用户也感受到云存储带来的便利…
阅读更多...
带你了解SpringBoot支持的复杂参数--自定义对象参数-自动封装

带你了解SpringBoot支持的复杂参数--自定义对象参数-自动封装

&#x1f600;前言 本篇博文是关于SpringBoot 在响应客户端请求时支持的复杂参数和自定义对象参数&#xff0c;希望您能够喜欢&#x1f60a; &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章…
阅读更多...
FPGA GTP全网最细讲解，aurora 8b/10b协议，OV5640摄像头板对板视频传输，提供2组4套工程源码和技术支持

FPGA GTP全网最细讲解，aurora 8b/10b协议，OV5640摄像头板对板视频传输，提供2组4套工程源码和技术支持

目录 1、前言免责声明 2、我这里已有的 GT 高速接口解决方案3、GTP 全网最细解读GTP 基本结构GTP 发送和接收处理流程GTP 的参考时钟GTP 发送接口GTP 接收接口GTP IP核调用和使用 4、设计思路框架OV5640摄像头配置及采集视频数据组包GTP aurora 8b/10b数据对齐视频数据解包图像…
阅读更多...
Oracle外部表ORACLE_LOADER方式加载数据

Oracle外部表ORACLE_LOADER方式加载数据

当数据源为文本或其它csv文件时&#xff0c;oracle可通过使用外部表加载数据方式&#xff0c;不需要导入可直接查询文件内的数据。 1、如下有一个文件名为&#xff1a;test1.txt 的数据文件。数据文件内容为&#xff1a; 2、使用sys授权hr用户可读写 DATA_PUMP_DIR 目录权限&a…
阅读更多...
苹果支付的实现

苹果支付的实现

由于app经常需要用到支付功能&#xff0c;然而ios用户&#xff0c;是无法用支付宝、微信进行支付&#xff0c;这时候只能用到苹果支付。苹果支付是苹果公司推出的一种在线支付方式&#xff0c;用户可以通过苹果支付购买应用、内购道具等等。 原理 苹果支付的实现原理是通过在…
阅读更多...
力扣75——多维动态规划

力扣75——多维动态规划

总结leetcode75中的多维动态规划算法题解题思路。 上一篇&#xff1a;力扣75——一维动态规划 力扣75——多维动态规划 1 不同路径2 最长公共子序列3 买卖股票的最佳时机含手续费4 编辑距离1 - 4 解题总结 1 不同路径 题目&#xff1a; 一个机器人位于一个 m x n 网格的左上角…
阅读更多...
Python发送QQ邮件

Python发送QQ邮件

使用Python的smtplib可以发送QQ邮件&#xff0c;代码如下 #!/usr/bin/python3 import smtplib from email.mime.text import MIMEText from email.header import Headersender 111qq.com # 发送邮箱 receivers [222qq.com] # 接收邮箱 auth_code "abc" # 授权…
阅读更多...
力扣 518. 零钱兑换 II

力扣 518. 零钱兑换 II

题目来源&#xff1a;https://leetcode.cn/problems/coin-change-ii/description/ C题解&#xff08;来源代码随想录&#xff09;&#xff1a; 这是一道典型的背包问题&#xff0c;一看到钱币数量不限&#xff0c;就知道这是一个完全背包。但本题和纯完全背包不一样&#xff0c…
阅读更多...
【AI大模型】训练Al大模型 （上篇）

【AI大模型】训练Al大模型 （上篇）

大模型超越AI 前言 洁洁的个人主页 我就问你有没有发挥&#xff01; 知行合一&#xff0c;志存高远。 目前所指的大模型&#xff0c;是“大规模深度学习模型”的简称&#xff0c;指具有大量参数和复杂结构的机器学习模型&#xff0c;可以处理大规模的数据和复杂的问题&#x…
阅读更多...
K8S系列一：概念入门

K8S系列一：概念入门

写在前面 本文组织方式&#xff1a; K8S的架构、作用和目的。需要首先对K8S整体有所了解。 K8S是什么&#xff1f; 为什么是K8S&#xff1f; K8S怎么做&#xff1f; K8S的重要概念&#xff0c;即K8S的API对象。要学习和使用K8S必须知道和掌握的几个对象。 Pod 实例 Volume 数…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023