jQuery +swiper 轮播 实现（猫眼选择影片和排期效果）【附效果图动图】

公司项目的一个线上买票的这么一个电影公众号的项目，21年做的 现在总结总结发个博客

先上动图，大家先看效果 后看代码

第一步：引入JS

打开swiper 官网 下载对应的css和js 解压后放进自己的项目里引入，我是这么做的 不知道能不能线上引入

第二步：页面部分

这块其实没什么说的，在页面上开出一个展示效果的这么一个div即可，（我喜欢，简单，粗暴）

起名不要学我，要符合规范（不一定）

第三步：展示下数据结构

这里插一句 并不是一定要当前展示的这个格式的数据，只有有数据，并且数据足够全面，咱们也可以自己组装

![在这里插入图片描述](https://img-blog.csdnimg.cn/805e02957b9943ceaa869f7c07a6c1b0.png

这里的数据返回的是 List< Object >类型的，对象中包含两个属性：

1.对象属性film:这里存放的是 影片的基本信息 比如：名称、封面图、等信息

2.Map< String ,List < Object > >类型的属性 :这里 最内部的Object 存储的是效果图的下半部分数据,举例说明:

就是红色圈圈这部分数据，一个Object就是一个 ；Key 就是日期 蓝色部分

第四步 页面部分 这里是swiper的加载区域 不是必须 我是在页面上写好的，分别对应效果图的几个部分

第五步 最重要的JS部分

1.先声明需要用到的变量 用于计算页面效果 （可根据实际情况作出调整）

这里是准备工作，结合动态效果图是可以看出，选中以后的样式跟未选中的样式是有丝丝差距的，为了实现效果，最终使用的是这样的方式

5.1先实现 影片跟简介部分 如图

这块代码部门呢 主要是先把上边的图片都展示出来 如果有选中的影片，就把选中的影片居中，如果没有选中的 就跟据返回的总数 取出中间的 突出展示 结合图片可以看清楚

点击影片实现 动态切换主图 + 排期更新

咱们还是先上效果图

这里动图可能看着像是突然切换过去的 其实不是 （这里可以看最开始的动图），是有过渡动画的，并且速度可调

现在是日期切换部分 ，选择日期 点击日期 更换排期信息

1 咱们先整日期部分 先看效果图

这里在前端对日期做了一个处理 当天的显示【今天】、明天的显示【明天】、后天的显示【后天】、大后天的显示【星期X】、再往后 就是纯日期了 具体的可以看做开始的效果图

上代码

处理显示星期的代码

最后 排期的部分 直接上代码

OK 那么最终的效果图呢 就是最开始的图片 至此 完成! 完结撒花~~~~