swiper滑动切换变换样式，实时显示当前索引

需求

参加活动送的车模型有一个展示页，展示页需要可以竖着滑动查看，当前查看的那个车在最中心且背景颜色、车的大小、文字颜色发生改变。

下面的例子是做完后又在swiper官网的案例中改的，我一般在项目里实现成功后都会另外写一个可以实现功能的小demo作为总结。因为单拿出来后缕了逻辑，加深了印象，下次再用也方便。

效果

资源

我是在 · swiper官网–获取swiper–下载swiper–（下载后的文件里的）swiper-master–demos–400-zoom.html · 里面修改的

完整代码

html里没什么特别的，就是七个图片加文字

css里就是给数字加一下颜色和阴影，便于区分

js都在注释里了

小提示：复制粘贴看效果前需要改一下css和js引入的路径以及图片的路径

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>Swiper demo</title><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"><!-- Link Swiper's CSS --><link rel="stylesheet" href="../package/swiper-bundle.min.css"><!-- Demo styles --><style>html,body {position: relative;height: 100%;}body {background: #000;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color: #000;margin: 0;padding: 0;}.swiper-container {width: 100%;height: 100%;}.swiper-slide {overflow: hidden;color: #fff;font-size: 50px;font-weight: bold;text-shadow: 2px 2px 8px yellow;}</style></head><body><!-- Swiper --><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><div class="swiper-zoom-container"><img src="./images/nature-1.jpg">1</div></div><div class="swiper-slide"><div class="swiper-zoom-container"><img src="./images/nature-2.jpg">2</div></div><div class="swiper-slide"><div class="swiper-zoom-container"><img src="./images/nature-3.jpg">3</div></div><div class="swiper-slide"><div class="swiper-zoom-container"><img src="./images/nature-1.jpg">4</div></div><div class="swiper-slide"><div class="swiper-zoom-container"><img src="./images/nature-2.jpg">5</div></div><div class="swiper-slide"><div class="swiper-zoom-container"><img src="./images/nature-3.jpg">6</div></div><div class="swiper-slide"><div class="swiper-zoom-container"><img src="./images/nature-1.jpg">7</div></div></div><!-- Add Pagination --><div class="swiper-pagination swiper-pagination-white"></div><!-- Add Navigation --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div><!-- Swiper JS --><script src="../package/swiper-bundle.js"></script><script src="./jquery-3.5.1.js"></script><!-- Initialize Swiper --><script>var swiper = new Swiper('.swiper-container', {loop: true, //因为本身数量不多,想要选中的内容在中间,所以需要循环direction: 'vertical', //方向:书香speed: 500, //速度spaceBetween: 14, //每个swiper-slide相隔的距离slidesPerView: 8, //显示一屏有几个,根据这个的值,显示在中心的那个swiper-slide的位置也会发生改变centeredSlides: true, //选中的swiper-slide显示在中间slideToClickedSlide: true, //可以点击切换navigation: { //左右箭头nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},on: {slideChangeTransitionStart: function() { //切换的时候获取到当前是第几个console.log('start :  ' + this.activeIndex);SwiperChange(this.activeIndex);},progress: function(swiper, progress) {//在拖拽过程中未松手时也要判断当前的索引值//以为是循环的状态,所以索引值不固定let nowProgress = this.progress;console.log(nowProgress);if (nowProgress > 0.149 && nowProgress < 0.199) {activeIndex = 4;} else if (nowProgress > 0.199 && nowProgress < 0.249) {activeIndex = 5;} else if (nowProgress > 0.249 && nowProgress < 0.299) {activeIndex = 6;} else if (nowProgress > 0.299 && nowProgress < 0.349) {activeIndex = 7;} else if (nowProgress > 0.349 && nowProgress < 0.399) {activeIndex = 8;} else if (nowProgress > 0.399 && nowProgress < 0.449) {activeIndex = 9;} else if (nowProgress > 0.449 && nowProgress < 0.499) {activeIndex = 10;} else if (nowProgress > 0.499 && nowProgress < 0.549) {activeIndex = 11;} else if (nowProgress > 0.549 && nowProgress < 0.6) {activeIndex = 12;} else if (nowProgress > 0.6 && nowProgress < 0.649) {activeIndex = 13;} else if (nowProgress > 0.649 && nowProgress < 0.7) {activeIndex = 14;} else if (nowProgress > 0.7 && nowProgress < 0.749) {activeIndex = 15;} else if (nowProgress > 0.749 && nowProgress < 0.799) {activeIndex = 16;} else if (nowProgress > 0.799 && nowProgress < 0.85) {activeIndex = 17;}SwiperChange(activeIndex);},}});//款式页切换时的效果function SwiperChange(activeIndex) {$('.swiper-slide').css({'height': '70px','color': '#fff','textShadow': '2px 2px 8px yellow'});$('.swiper-slide:eq(' + activeIndex + ')').css({'height': '120px','color': '#fff','textShadow': '2px 2px 8px red'});}</script></body></html>

swiper滑动切换变换样式，实时显示当前索引相关推荐

小程序实现左右滑动切换菜单+瀑布流显示列表
小程序实现左右滑动列表区域,切换菜单(横向滑动菜单,切换时自动设置选中的菜单窗口居中显示),加载显示对应瀑布流数据,页面滚动时,设置菜单栏是否置顶显示自己写的一个demo(下载地址:https:// ...
解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时，图表显示错乱-实现滑动tab
解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id=" ...
如何实现多风格选择样式实时切换？
如何实现多风格选择样式实时切换? Author:DivCSS Data:2007-01-28 字体大小: 小中大 [RSS]订阅 | 上一篇 | 下一篇我们在制作网站的时候,希望自 ...
(10)3DMAX之常用工具(镜像、对齐、组、层资源管理器、冻结、软件专家模式、物体半透明显示、变换虚拟体显示切换、自适应降级)
1.镜像(Alt+T+M):以物体轴心点的点位作为镜像的对称点来进行XYZ三个轴向上的对称反转 2.对齐(Alt+A): 学习对齐,就要对物体轴向上的最大和最小有所认识对齐使用方法:先选中一个对象, ...
python+tkinter+threading制作多线程简易音乐播放器（自动播放，上一曲，下一曲，播放，暂停，实时显示歌曲名并能自动切换歌曲的功能）
https://blog.csdn.net/qq_41962782/article/details/80106158 小弟是小白因大作业,在此博文的基础上,我增加了歌曲目录的选择,自动播放,实时显示歌 ...
php 实现tab切换_微信小程序实例：实现顶部tab切换以及滑动切换时导航栏会随着移动的效果（代码）...
本篇文章给大家带来的内容是关于微信小程序实例:实现顶部tab切换以及滑动切换时导航栏会随着移动的效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现的效果: js: Pa ...
Android自定义顶部栏及侧滑菜单和fragment+viewpag滑动切换的实现
嘿嘿嘿,关于android滑动的操作,是不是经常都会用到呢. 我肯定也要学习一下啦. https://blog.csdn.net/u013184970/article/details/82882107 ...
[Android] 使用Include布局+Fragment滑动切换屏幕
前面的文章已经讲述了"随手拍"项目图像处理的技术部分,该篇文章主要是主界面的布局及屏幕滑动切换,并结合鸿洋大神的视频和郭神的第一行代码(强推两人Android博客),完成了 ...
手机端图片滑动切换效果
最近公司要求开发wap版本页面,碰到了个图片滑动切换效果,折腾了半天,自己封装了一个比较通用的小控件,在此分享一下. 大概功能:可以自定义是否自动切换,支持单手滑动图片进行切换,支持左右滑动切换.循环 ...
android 手机左右移动图片轮播,js实现支持手机滑动切换的轮播图片效果实例
本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: $('.carousel-image'). ...

swiper滑动切换变换样式，实时显示当前索引

需求

效果

资源

完整代码

swiper滑动切换变换样式，实时显示当前索引相关推荐

最新文章

热门文章