轮播图的制作大全

例如该样式:

1.Vue的方法(可实现自动轮播和左右按钮和下方原点按钮轮播)

<div id="app"><div class="a" ref="b" @mouseenter="MouseFun('c')" @mouseleave="MouseFun('d')">//1.图片显示盒子<div class="imgBox" :style="{left:`-${leftVal}px`,transition:`${ition}s`}"><img :src="item.imgUrl" v-for="(item,index) in imgList" :key="index" /><img :src="imgList[0].imgUrl" alt=""></div>//2.按钮<div class="leftBtn" @click="throttle(PrevFun)">&larr;</div>  //左按钮<div class="rightBtn" @click="throttle(NextFun)">&rarr;</div> //右按钮//3.下方选择点击按钮<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>    
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script type="text/javascript">var app = new Vue({el: '#app',

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

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

相关文章

接受两个参数,并基于给定的概率(40%和60%)返回相应的参数值

function getRandomValue(param1, param2) {// 生成一个0到1之间的随机数const randomNum Math.random();// 定义40%和60%的概率const probability1 0.4; // param1的概率为40%const probability2 0.6; // param2的概率为60%// 根据概率返回相应的参数if (randomNum < pr…

2024最新算法:北极海鹦优化(Arctic puffin optimization,APO)算法求解23个函数,MATLAB代码

一、算法介绍 北极海鹦优化&#xff08;Arctic puffin optimization&#xff0c;APO&#xff09;算法是2024年提出一种智能优化算法。该算法模拟海鹦在空中飞行和水下觅食两个阶段的行为&#xff0c;旨在实现勘探与开发之间更好的平衡。该算法包括几个关键操作&#xff0c;包括…

CS-流量通讯特征修改-端口store证书流量通讯规则

免责声明:本文仅做技术交流与学习... 目录 1.修改默认端口&#xff1a; 2.去除store证书特征&#xff1a; 查看证书指纹&#xff1a; 生成证书指纹&#xff1a; 应用证书指纹&#xff1a; 3.去除流量通讯特征&#xff1a; 规则资源 http流量特征修改: https流量特征修改:…

PostgreSQL 日志管理与故障排查(十二)

1. 日志类型与配置 1.1 日志级别 PostgreSQL 提供多种日志级别&#xff0c;可根据需求配置详细程度。 ERROR&#xff1a;仅记录错误消息。WARNING&#xff1a;记录警告和错误消息。LOG&#xff1a;记录所有普通日志消息。DEBUG&#xff1a;记录详细的调试信息。 1.2 配置日…

DNF手游攻略:平民玩家角色打造保姆级攻略!云手机游戏辅助!

在《地下城与勇士》&#xff08;DNF&#xff09;手游中&#xff0c;角色的成长与装备的提升是每位玩家追求的目标。然而&#xff0c;对于不愿意投入大量金钱的平民玩家来说&#xff0c;如何在有限的资源下最大化提升角色战力是一项需要深思熟虑的挑战。本文将详细介绍平民玩家在…

鸿蒙开发网络管理:【@ohos.net.webSocket (WebSocket连接)】

WebSocket连接 说明&#xff1a; 本模块首批接口从API version 6开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 使用WebSocket建立服务器与客户端的双向连接&#xff0c;需要先通过[createWebSocket]方法创建[WebSocket]对象&#xff0c;然后通…

c++ 常用的锁及用法介绍和示例

2024/6/21 14:20:10 在 C++ 中,常用的锁主要包括以下几种:std::mutex、std::recursive_mutex、std::timed_mutex 和 std::shared_mutex。这些锁可以帮助我们在多线程编程中保护共享数据,避免竞争条件。以下是每种锁的介绍及其用法示例: std::mutex std::mutex 是最基本的互…

初识仓颉语言

仓颉编程语言是一种面向全场景应用开发的通用编程语言&#xff0c;可以兼顾开发效率和运行性能&#xff0c;并提供良好的编程体验&#xff0c;主要具有如下特点&#xff1a; 语法简明高效&#xff1a;仓颉编程语言提供了一系列简明高效的语法&#xff0c;旨在减少冗余书写、提升…

接口测试代码和工具

通过python的requests给接口发送请求进行测试 #coding:utf-8 import requests class TestApi(): url_login "https://legend-sit.omodaglobal.com/api/auth/oauth2/token" url_topic_b "https://legend-sit.omodaglobal.com/api/community/topic_b/page?…

Python polars学习-07 缺失值

背景 polars学习系列文章&#xff0c;第7篇 缺失值 该系列文章会分享到github&#xff0c;大家可以去下载jupyter文件&#xff0c;进行参考学习 仓库地址&#xff1a;https://github.com/DataShare-duo/polars_learn 小编运行环境 import sysprint(python 版本&#xff1a;…

快手商品详情的应用范围和请求示例笔记

应用范围&#xff1a; 快手商品详情的应用范围广泛&#xff0c;主要体现在以下几个方面&#xff1a; 用户购买决策支持&#xff1a; 用户通过查看快手商品详情页&#xff0c;可以获取商品的详细信息&#xff0c;如名称、价格、库存、产地、规格、材质、功能特点等。 商品详…

Vue71-嵌套(多级)路由

一、需求 二、开发步骤 2-1、编写路由组件 2-2、编写路由规则 2-3、编写路由标签<router-link>、<router-view> 三、小结

计算预卷积特征

当冻结卷积层和训练模型时&#xff0c;全连接层或dense层(vgg.classifier)的输入始终是相同的。为了更好地理解&#xff0c;让我们将卷积块(在示例中为vgg.features块)视为具有了已学习好的权重且在训练期间不会更改的函数。因此&#xff0c;计算卷积特征并保存下来将有助于我们…

阿里云云服务器、ACR镜像服务、容器化实战:搭建企业应用

一、容器化基础知识 华为云免费试用服务器&#xff1a;https://activity.huaweicloud.com/free_test/index.html 阿里云docker容器教程&#xff1a;https://edu.aliyun.com/course/3111900/lesson/341807097 查询ip地址&#xff1a;www.ip138.com 二、容器化搭建企业应用实战 2…

2.中国菜刀使用详解(OWASP实战训练)

2.中国菜刀使用详解&#xff08;OWASP实战训练&#xff09;&#xff08;OWASP实战训练&#xff09; Webshell&#xff08;1&#xff09;shell2.php #eval 使用PHP函数&#xff0c;例如PHPinfo&#xff08;2&#xff09;Shell3.php #system 使用Linux系统命令&#xff0c;列如ls…

【已解决】Python报错:NameError: name ‘Image‘ is not defined

&#x1f60e; 作者介绍&#xff1a;我是程序员行者孙&#xff0c;一个热爱分享技术的制能工人。计算机本硕&#xff0c;人工制能研究生。公众号&#xff1a;AI Sun&#xff0c;视频号&#xff1a;AI-行者Sun &#x1f388; 本文专栏&#xff1a;本文收录于《AI实战中的各种bug…

性能评测系列(PT-010):Spring Boot + MySQL,高并发insert

一、测试概述 测试场景 场景编号&#xff1a; PT-010场景描述&#xff1a; Java应用&#xff0c;MySQL单表写测试目的&#xff1a;指定规格、配置、环境下&#xff0c;Java应用数据库简单写场景负载能力评估。&#xff08;不含调优&#xff0c;所测结果未必是最优结果&#x…

软RAID

硬盘 连续空间 无法 扩容 lvm 非连续空间 可以动态扩容 raid 备份&#xff0c; 提高读写性能&#xff0c;不能扩容 raid 是磁盘的集合&#xff0c;按照排列组合的方法不 一&#xff0c;给 raid 去了不同的名字 raid0 raid1 raid5 raid10 什么是 RAID "RAID"…

计算机网络之UDP协议

一.什么是UDP协议&#xff1a; 1.1UDP的基本概念 UDP协议又叫做用户数据报协议&#xff0c;是一个目标在传输层提供直接发送报文的能力&#xff0c;UDP与TCP相比&#xff0c;它不会拆分数据&#xff0c;它只是能够发送报文。 1.2为什么要使用UDP协议 我们可能会想&#xff0c;如…

three.js - MeshPhongMaterial材质

phong网格材质&#xff1a;Mesh - Phong - Material 一种用于具有镜面高光的光泽表面的材质。 它可以模拟&#xff0c;具有镜面高光的光泽表面&#xff0c;提供镜面反射效果。 MeshPhongMaterial&#xff1a; MeshPhongMaterial是一种基于Phong光照模型的材质&#xff0c;主要…