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…...
AI技能库实战：模块化设计赋能博客创作自动化工作流
1. 项目概述：一个面向AI时代的博客技能开源库最近在GitHub上闲逛，发现了一个挺有意思的项目，叫inblog-inc/inblog-ai-skills。光看这个名字，就透着一股子“务实”的味道。它不是又一个教你如何调参炼丹的AI模型库，也不…...
告别枯燥表格！用Power BI的矩形树图，5分钟搞定你的销售利润可视化分析
商业数据可视化实战：用Power BI矩形树图5分钟呈现销售利润洞察 在每周的销售复盘会议上，你是否经常面对这样的困境：手头有一份密密麻麻的Excel表格，包含了各省市、各产品的销售利润数据，却难以快速向团队传达关键业务洞…...
FS8024A芯片实现USB-C PD诱骗：打造TYPE-C转DC电源转接头方案
1. 项目概述：一个“小接口”背后的大世界 最近在折腾一个便携显示器项目，手头有现成的12V驱动板，但供电却成了麻烦事。现在谁还愿意随身带个笨重的12V电源适配器？满世界都是USB-C接口的充电宝和笔记本充电器。于是，一个…...
如何利用awesome-clothed-human资源构建你自己的虚拟试穿系统？
如何利用awesome-clothed-human资源构建你自己的虚拟试穿系统？ 【免费下载链接】awesome-digital-human Digital Human Resource: 2D/3D/4D Human Modeling, Avatar Generation & Animation, Clothed People Digitalization, Virtual Try-On, etc. 项目地址: …...
论文详解：考虑人类移动日常节律的动态社区检测
论文详解：考虑人类移动日常节律的动态社区检测 文章目录 论文详解：考虑人类移动日常节律的动态社区检测 1. 论文基本信息 2. 摘要与核心贡献 2.1 研究背景 2.2 研究方法 2.3 核心贡献 3. 研究背景与问题提出 3.1 城市空间结构研究的重要性 3.2 传统静态社区检测的局限性 3.3 …...
LDAP认证失败率下降92%！DeepSeek集成最佳实践，含OpenLDAP/Active Directory双环境配置清单
更多请点击： https://intelliparadigm.com 第一章：LDAP认证失败率下降92%！DeepSeek集成最佳实践，含OpenLDAP/Active Directory双环境配置清单 在企业级AI平台落地过程中，统一身份认证是安全与体验的基石。DeepSeek模型…...
Zeek日志AI分析平台：从网络监控到智能威胁检测的架构与实践
1. 项目概述：从开源网络监控到智能分析的进化如果你在网络安全、运维或者数据分析领域摸爬滚打过几年，大概率听说过 Zeek（以前叫 Bro）。它不是一个简单的入侵检测系统，而是一个功能强大的网络分析框架，能够…...
基于Google Workspace API与LLM的办公自动化技能框架设计与实现
1. 项目概述：当Google Workspace遇上AI技能 如果你和我一样，日常重度依赖Google Workspace（以前叫G Suite）来处理邮件、文档、表格和日历，那你肯定也想过：要是这些工具能更“聪明”一点就好了。比如&#…...
NumPy 使用指南
一、为什么选择 NumPy 而非 Python 列表Python 原生列表（list）虽能存储数组形式的数据，但存在显著性能缺陷：内存效率低：列表存储的是对象指针，即使存储简单数值（如 [0,1,2]）…...
ToyKind-World：基于Python的ECS架构多智能体模拟框架构建指南
1. 项目概述与核心价值最近在GitHub上看到一个挺有意思的项目，叫“ToyKind-World”。光看这个名字，你可能会觉得有点抽象，是玩具世界？还是某种模拟器？点进去一看，发现它其实是一个用Python构建的、高度可配…...