swiper 幻灯片
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>swiper全屏响应式幻灯片代码</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"><link rel="stylesheet" href="static/css/swiper.min.css">
<style>
* {padding: 0;margin: 0;
}body{background-color: #252525}
.clearfix:after {visibility: hidden;display: block;content: "";height: 0;line-height: 0;clear: both;
}
.clearfix {zoom: 1;
}
html, body {position: relative;height: 100%;
}
body {font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color: #000;margin: 0;padding: 0;
}
.swiper-container {width: 100%;margin-left: auto;margin-right: auto;
}
.gallery-top {padding-bottom: 12px;width: 100%;
}
.gallery-top .swiper-slide {max-width: 100%;max-width: 100%;width: auto;overflow: hidden;opacity: 0.5;
}
.gallery-top .swiper-slide img {max-width: 100%;height: 100%;
}
.gallery-top .swiper-slide-active {opacity: 1;
}
.gallery-thumbs {height: 65px;box-sizing: border-box;padding-top: 2px;
}
.gallery-thumbs .swiper-slide {max-width: 100%;max-height: 100%;width: auto;height: 100%;overflow: hidden;
}
.gallery-thumbs .swiper-slide img {max-width: 100%;height: 100%;
}
.gallery-thumbs-box {position: relative;width: 100%;height: 65px;
}
.gallery-thumbs-box .swiper-container {margin-left: auto;margin-right: auto;
}
.gallery-thumbs-box .swiper-button-prev {background-image: url(static/images/left-small.png);width: 10px;height: 65px;background-size: 10px 18px;left: 10px;margin-top: 0;top: 0;outline: none;
}
.gallery-thumbs-box .swiper-button-next {background-image: url(static/images/next-small.png);width: 10px;height: 65px;background-size: 10px 18px;right: 10px;margin-top: 0;top: 0;outline: none;
}
.gallery-top-box {position: relative;width: 100%;
}
.gallery-top-box .swiper-container {margin-left: auto;margin-right: auto;
}
.gallery-top-box .swiper-button-prev {background-image: url(static/images/left-lg.png);width: 18px;background-size: 18px 38px;left: 10px;margin-top: 0;top: 50%;outline: none;transform: translate(0, -50%)
}
.gallery-top-box .swiper-button-next {background-image: url(static/images/next-lg.png);width: 18px;background-size: 18px 38px;right: 10px;margin-top: 0;top: 50%;outline: none;transform: translate(0, -50%)
}
.slideshow {float: right;margin-right: 30px;margin-top: 15px;display: inline-block;background-repeat: no-repeat;background-position: center right;background-image: url("static/images/play.png");cursor: pointer;padding-right: 15px;color: #999;transition: all 0.3s ease
}
.pauseed {background-image: url("static/images/pause.png");
}
.inner_img_area:hover img{transform: scale(1.2);
}
.inner_img_area img{width: 100%;transition: .5s;
}
</style></head>
<body ><!-- Swiper -->
<div class="inner_img_area"><div class="gallery-top-box"><div class="swiper-container gallery-top"><div class="swiper-wrapper"><div class="swiper-slide" data-id="1"> <img src="static/images/a1.png"> </div><div class="swiper-slide" data-id="2"> <img src="static/images/a2.png"> </div><div class="swiper-slide" data-id="3"> <img src="static/images/a3.png"> </div><div class="swiper-slide" data-id="4"> <img src="static/images/a4.png"> </div><div class="swiper-slide" data-id="5"> <img src="static/images/a5.png"> </div><div class="swiper-slide" data-id="6"> <img src="static/images/a6.png"> </div><div class="swiper-slide" data-id="7"> <img src="static/images/a1.png"> </div><div class="swiper-slide" data-id="8"> <img src="static/images/a2.png"> </div><div class="swiper-slide" data-id="9"> <img src="static/images/a3.png"> </div><div class="swiper-slide" data-id="10"> <img src="static/images/a4.png"> </div><div class="swiper-slide" data-id="11"> <img src="static/images/a5.png"> </div><div class="swiper-slide" data-id="12"> <img src="static/images/a6.png"> </div><div class="swiper-slide" data-id="13"> <img src="static/images/a1.png" > </div><div class="swiper-slide" data-id="14"> <img src="static/images/a2.png"> </div><div class="swiper-slide" data-id="15"> <img src="static/images/a3.png"> </div><div class="swiper-slide" data-id="16"> <img src="static/images/a4.png"> </div><div class="swiper-slide" data-id="17"> <img src="static/images/a5.png"> </div><div class="swiper-slide" data-id="18"> <img src="static/images/a6.png"> </div><div class="swiper-slide" data-id="19"> <img src="static/images/a1.png" > </div><div class="swiper-slide" data-id="20"> <img src="static/images/a2.png"> </div><div class="swiper-slide" data-id="21"> <img src="static/images/a3.png"> </div><div class="swiper-slide" data-id="22"> <img src="static/images/a4.png"> </div><div class="swiper-slide" data-id="23"> <img src="static/images/a5.png"> </div><div class="swiper-slide" data-id="24"> <img src="static/images/a6.png"> </div></div><div class="swiper-scrollbar"></div></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div><div class="gallery-thumbs-box"><div class="swiper-container gallery-thumbs"><div class="swiper-wrapper"><div class="swiper-slide" data-id="1"> <img src="static/images/a1.png"> </div><div class="swiper-slide" data-id="2"> <img src="static/images/a2.png"> </div><div class="swiper-slide" data-id="3"> <img src="static/images/a3.png"> </div><div class="swiper-slide" data-id="4"> <img src="static/images/a4.png"> </div><div class="swiper-slide" data-id="5"> <img src="static/images/a5.png"> </div><div class="swiper-slide" data-id="6"> <img src="static/images/a6.png"> </div><div class="swiper-slide" data-id="7"> <img src="static/images/a1.png"> </div><div class="swiper-slide" data-id="8"> <img src="static/images/a2.png"> </div><div class="swiper-slide" data-id="9"> <img src="static/images/a3.png"> </div><div class="swiper-slide" data-id="10"> <img src="static/images/a4.png"> </div><div class="swiper-slide" data-id="11"> <img src="static/images/a5.png"> </div><div class="swiper-slide" data-id="12"> <img src="static/images/a6.png"> </div><div class="swiper-slide" data-id="13"> <img src="static/images/a1.png" > </div><div class="swiper-slide" data-id="14"> <img src="static/images/a2.png"> </div><div class="swiper-slide" data-id="15"> <img src="static/images/a3.png"> </div><div class="swiper-slide" data-id="16"> <img src="static/images/a4.png"> </div><div class="swiper-slide" data-id="17"> <img src="static/images/a5.png"> </div><div class="swiper-slide" data-id="18"> <img src="static/images/a6.png"> </div><div class="swiper-slide" data-id="19"> <img src="static/images/a1.png" > </div><div class="swiper-slide" data-id="20"> <img src="static/images/a2.png"> </div><div class="swiper-slide" data-id="21"> <img src="static/images/a3.png"> </div><div class="swiper-slide" data-id="22"> <img src="static/images/a4.png"> </div><div class="swiper-slide" data-id="23"> <img src="static/images/a5.png"> </div><div class="swiper-slide" data-id="24"> <img src="static/images/a6.png"> </div></div></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div><!-- Swiper --><div class="footernav clearfix" style="height:45px;overflow:hidden;"><div class="slideshow">Stop</div></div>
</div><!-- Swiper JS -->
<script src="static/js/jquery.min.js"></script>
<script src="static/js/swiper.min.js"></script>
<script>//图片等比例galleryTopHeight()$(window).resize(function(){galleryTopHeight()})var galleryTop = new Swiper('.gallery-top-box .gallery-top', {centeredSlides: true,autoplay:{delay:4000,disableOnInteraction: false },slidesPerView: 'auto',spaceBetween: 10,navigation: {nextEl: '.gallery-top-box .swiper-button-next',prevEl: '.gallery-top-box .swiper-button-prev',},scrollbar: {el: '.swiper-scrollbar',hide: false,draggable: true,dragSize:150,}});$(".slideshow").click(function(){if($(this).hasClass("pauseed")){//播放$(this).removeClass("pauseed")galleryTop.autoplay.start()}else{//暂停$(this).addClass("pauseed")galleryTop.autoplay.stop()}})galleryTop.scrollbar.$el.css({"bottom":"0px","background":"none","height":"5px"});galleryTop.scrollbar.$dragEl.css({'background':'rgba(171,171,171,171.6)'}); galleryTop.scrollbar.updateSize();var galleryThumbs = new Swiper('.gallery-thumbs-box .gallery-thumbs', {spaceBetween: 10,slidesPerView: 'auto',touchRatio: 0.2,navigation: {nextEl: '.gallery-thumbs-box .swiper-button-next',prevEl: '.gallery-thumbs-box .swiper-button-prev',}});galleryTop.controller.control = galleryThumbs;<!--注意添加objThumbs,objTop对应的索引值1 ~ N -->var objThumbs = $(".gallery-thumbs .swiper-wrapper .swiper-slide");var objTop = $(".gallery-top .swiper-wrapper .swiper-slide");objThumbs.click(function(e){var currentId = $(this).attr("data-id");for(var i = 0 ; i< objTop.length; i++){if($(objTop[i]).attr("data-id") === currentId){$(objTop[i-1]).addClass("swiper-slide-prev")$(objTop[i-1]).siblings().removeClass("swiper-slide-prev")$(objTop[i]).addClass("swiper-slide-active")$(objTop[i]).siblings().removeClass("swiper-slide-active")$(objTop[i+1]).addClass("swiper-slide-next")$(objTop[i+1]).siblings().removeClass("swiper-slide-next")e.preventDefault();galleryTop.slideTo(i,1000, false);}}})function galleryTopHeight(){//处理图片比例var wh = $(window).height();var headernav_height = $(".headernav").height()var footernav_height = $(".footernav").height()var galleryThumbs_height = $(".gallery-thumbs").height()var galleryTop_height = wh - galleryThumbs_height - headernav_height - footernav_height - 22$(".gallery-top").css("height",galleryTop_height)//缩略图var galleryThumbs_width = $(window).width() - 60$(".gallery-thumbs-box .swiper-container").css("width",galleryThumbs_width)//大图var galleryTop_width = $(window).width() - 80$(".gallery-top-box .swiper-container").css("width",galleryTop_width)}</script></body>
</html>源码包swiper幻灯片
相关文章：
swiper 幻灯片
index.html <!DOCTYPE html> <html lang"en"> <head> <meta charset"utf-8"> <title>swiper全屏响应式幻灯片代码</title> <meta name"viewport" content"widthdevice-width, initial-scale1, min…...
Ubuntu 使用Vscode的一些技巧 ROS
Ubuntu VSCode的一些设置（ROS） 导入工作空间 推荐只导入工作空间下的src目录 如果将整个工作空间导入VSCode，那么这个src就变成了次级目录，容易在写程序的时候把本应该添加到具体工程src目录里的代码文件给误添加到这个catkin_w…...
JS中的三种事件模型
JavaScript 中的事件模型主要有三种： 传统事件模型（DOM Level 0）标准事件模型（DOM Level 2）IE 事件模型（非标准，仅限于旧版本的 Internet Explorer） 下面分别介绍这三种事件模型&…...
南京邮电大学计算机网络实验二（网络路由器配置RIP协议）
文章目录 一、 实验目的和要求二、 实验环境(实验设备)三、 实验步骤四、实验小结（包括问题和解决方法、心得体会、意见与建议等）五、报告资源 一、 实验目的和要求 掌握思科路由器的运行过程，掌握思科路由器的硬件连线与接口，掌…...
仓颉语言的编译和构建
一、cjc 使用 cjc是仓颉编程语言的编译命令，其提供了丰富的功能及对应的编译选项，本章将对基本使用方法进行介绍。 cjc-frontend （仓颉前端编译器）会随 cjc 一起通过 Cangjie SDK 提供，cjc-frontend 能够将仓颉源码编…...
网络基础-协议
一、ARP 通过IP得到Mac 首先会查看缓存的arp表中是否有相应的IP和Mac对应关系，如果有直接进行包封装。如果没有则进行广播当对应的地址就收到广播包后会根据arp中的源地址进行单播返回相应的IP和Mac对应关系。 arp -a 查看现有的arp缓存 二、RARP反向地址解析 通过…...
电子设备抗震等级与电子设备震动实验
若该文为原创文章，转载请注明原文出处 本文章博客地址：https://hpzwl.blog.csdn.net/article/details/139923445 红胖子(红模仿)的博文大全：开发技术集合（包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软…...
你还在手动操作仓库？这款 CLI 工具让你效率飙升300%！
前言 作为一名开发者，我经常会在 GitHub 和 Gitee 上 fork 各种项目。时间一长，这些仓库就会堆积如山，变成了“垃圾仓库”。每次打开代码托管平台，看到那些不再需要的仓库，我的强迫症就会发作。手动一个一个删除这些仓…...
未来已来！GPT-5震撼登场，工作与生活面临新变革！
随着科技界领袖对AI系统发展之快的惊叹，新一代大语言模型GPT-5即将登场，引发了我们对工作和日常生活的新一轮思考。微软CTO Kevin Scott和阿里巴巴董事长蔡崇信等人的言论为我们描绘了一幅生动的未来图景，即AI将在我们的生活中扮演越来越重要…...
洗地机选购指南，什么品牌最值得购买？2024四大口碑品牌推荐
随着炎炎夏日的到来，家里的地板清洁会成为人们“沉重”的负担，而拥有一台能够高效又轻松完成地板深度清洁的洗地机是一件非常幸福的事儿。但是，面对市场上琳琅满目的洗地机品牌和型号，如何找到一款综合性能都不错的洗地机成为了许…...
住宅IP与普通IP的区别
在互联网连接中，IP地址是识别每个网络节点的关键。在众多类型的IP地址中，住宅IP和普通IP是两种常见的分类。本文将深入探讨住宅IP与普通IP之间的主要区别。 一、定义与来源 住宅IP指的是由互联网服务提供商（ISP）直接分配给家庭或…...
【Java】线程池技术（三）ThreadPoolExecutor 状态与运行源码解析
ThreadPoolExecutor 状态 ThreadPoolExecutor 继承了 AbstractExecutorService，并实现了 ExecutorService 接口，用于管理线程。内部使用了原子整型 AtomicInteger ctl 来表示线程池状态和 Worker 数量。前 3 位表示线程池状态，后 29 位表示 …...
vscode使用内置插件断点调试vue2项目
1、首先项目中要开启source-map 在vue.config.js 文件中 module.exports {configureWebpack: {devtool: process.env.NODE_ENV ! "production" ? "source-map" : ,} }2、项目根目录新建.vscode/launch.js文件 {"configurations": [{"ty…...
centos7 低版本docker 升级为高版本
删除 docker yum -y remove docker*安装 yum 管理工具 yum install -y yum-utils添加国内镜像 manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo查看可用软件版本yum list docker-ce --showduplicates|sort -r安装 yum -y install docke…...
了解SD-WAN与传统WAN的区别
近年来，许多企业选择了SD-WAN作为他们的网络解决方案。云基础架构的SD-WAN不仅具备成本效益，而且提供更安全、更可靠的WAN连接，有助于实现持续盈利。客户能够更好地控制他们的网络，个性化定制且无需额外成本。 那么，为…...
技术干货 | AI驱动工程仿真和设计创新
在当今快速发展的技术领域，人工智能（AI）、机器学习和深度学习等技术已经成为推动工程仿真和设计创新的关键力量。Altair技术经理张晨在Altair “AI FOR ENGINEERS”线下研讨会上发表了相关精彩演讲，本文摘自演讲内容，与…...
深度分析SQL与NoSQL数据库：优缺点、使用场景及选型指南
在大数据和云计算时代，数据库技术的发展日新月异。SQL（关系型数据库）和NoSQL（非关系型数据库）作为两大主流数据库技术，各有其独特的优势和使用场景。本文将深入分析SQL和NoSQL的定义、优缺点、使用场景&…...
Linux基础 - shell基础
目录 零. 简介 一、常见的 Shell 类型 二、Shell 命令格式 三、基本命令 四、通配符 五、重定向 六、管道 七、变量 八、条件判断和流程控制 零. 简介 Shell 是一种命令解释器，在 Ubuntu 系统中，它负责接收用户在命令行中输入的命令，…...
一文搞懂Linux命令行下载OneDrive分享文件
一文搞懂Linux命令行下载OneDrive分享文件 什么问题？ 因为OneDrive有些坑，无法从分享界面获取真实下载链接，比如下面这个链接： https://connecthkuhk-my.sharepoint.com/:f:/g/personal/jhyang13_connect_hku_hk/EsEgHtGOWbJIm…...
SpringBoot 实现RequestBodyAdvice封装统一接受类功能
一、相关往期文章 SpringBootVue实现AOP系统日志功能_aop的vue完整项目 Spring AOP (面向切面编程）原理与代理模式—实例演示_面向切面aop原理详解 二、需求分析 按照一般情况，统一接受类可以像以下的方式进行处理： 如果不想使用 Request…...
i18n-node快速入门：10个简单步骤实现应用国际化 [特殊字符]
i18n-node快速入门：10个简单步骤实现应用国际化 🌍 【免费下载链接】i18n-node Lightweight simple translation module for node.js / express.js with dynamic json storage. Uses common __(...) syntax in app and templates. 项目地址: https://g…...
LFM2.5-1.2B-Thinking-GGUF入门必看：3步完成低资源GPU部署（含健康检查命令）
LFM2.5-1.2B-Thinking-GGUF入门必看：3步完成低资源GPU部署（含健康检查命令） 1. 模型简介 LFM2.5-1.2B-Thinking-GGUF是Liquid AI推出的轻量级文本生成模型，专为低资源环境优化设计。这个模型采用GGUF格式，配合llama.…...
KEITHLEY 6221+2182A组合在霍尔测量中的5个实战技巧（避坑指南）
KEITHLEY 62212182A组合在霍尔测量中的5个实战技巧（避坑指南） 霍尔测量作为材料科学研究中的关键手段，对仪器精度和操作细节的要求近乎苛刻。KEITHLEY 6221电流源与2182A纳伏表的组合，凭借其出色的低噪声性能和微电流处理能力&…...
嵌入式Linux实战：全志T3+vsftpd实现轻量级文件传输（含WinSCP连接教程）
嵌入式Linux实战：全志T3vsftpd实现轻量级文件传输（含WinSCP连接教程） 在物联网设备开发中，文件传输是一个看似简单却充满挑战的环节。当你的开发板是全志T3这样的资源受限平台时，如何在有限的存储和内存条件下搭建一个…...
从汇编指令到硬件行为：深入解析Aurix Tricore Trap触发与恢复的全过程
从汇编指令到硬件行为：深入解析Aurix Tricore Trap触发与恢复的全过程 当我们在调试Aurix Tricore处理器的异常处理机制时，常常会遇到一个令人困惑的现象：为什么有些Trap发生后程序能够继续执行，而有些则会导致系统崩溃ÿ…...
s2-pro语音合成镜像快速上手：5分钟搞定专业级文字转语音
s2-pro语音合成镜像快速上手：5分钟搞定专业级文字转语音 1. 镜像简介与核心功能 s2-pro是Fish Audio开源的专业级语音合成模型镜像，能够将文本转换为自然流畅的语音。这个镜像特别适合需要快速部署文字转语音功能的开发者、内容创作者和企业用户。 1.…...
Chord - Ink Shadow 跨模态应用探索：连接文本与MATLAB科学计算
Chord - Ink & Shadow 跨模态应用探索：连接文本与MATLAB科学计算 你有没有过这样的经历？面对一堆实验数据，脑子里已经想好了要画个什么样的图来分析，但打开MATLAB，却卡在了写代码这一步。复杂的函数名、繁琐的语法…...
)
Debian GNU/Linux12高效运维指南(网络配置、远程管理、软件更新与安全防护)
1. Debian GNU/Linux12网络配置实战 刚接触Debian GNU/Linux12的朋友们，网络配置可能是你们遇到的第一个挑战。别担心，我会用最直白的方式带你们搞定这个环节。网络配置就像给新房子拉网线，得先把基础线路接好，后续的上网、远程控…...
H3C交换机vlan隔离常见配置错误排查指南（附HCL模拟器案例）
H3C交换机VLAN隔离配置实战：从原理到排错的深度指南 在当今企业网络架构中，VLAN隔离技术已经成为网络分段和安全策略的基础支柱。作为网络管理员，我们经常需要在H3C交换机上配置VLAN隔离来实现不同部门或业务单元之间的逻辑隔离。然而&#…...
基于DAMOYOLO-S与计算机网络技术：构建分布式视频分析集群
基于DAMOYOLO-S与计算机网络技术：构建分布式视频分析集群 想象一下，一个大型物流园区，上百个摄像头日夜不停地运转，管理者需要实时知道：哪条通道拥堵了？哪个区域有异常人员闯入？传统的监控方式…...