前言：最近在做一个音乐播放器，首页要做一个图片轮播，看了bootstrap的carousel插件以及移动端的swipe.js库，都是平面图片轮播的效果，所以自己想着实现类似网易云app里那种3d图片轮播的效果，所以写下此文
使用方法：
首先，引入Swipe.js和Swipe.css
定义轮播列表ul[data-ride="swipe"],然后每一个轮播项都加上类 class="item" ；
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>图片轮播3d效果</title> 8 <link rel="stylesheet" href="swipe.css"> 9 </head> 10 <body> 11 <div class="slide_box"> 12 <ul class="slide_list swipe" id="swipe_list" data-ride=‘swipe‘> 13 <li class="item"> 14 <a href="" class="slide_list_link"> 15 <img src="https://y.gtimg.cn/music/common/upload/t_focus_info_iphone/67011.jpg" alt="" class="slide_list_pic"> 16 </a> 17 </li> 18 </ul> 19 <div class="slide_action"> 20 <a href="##" class="slide_action_btn-left"><span class=" glyphicon glyphicon-home" ></span></a> 21 <a href="##" class=‘slide_action_btn-right‘><span class=" glyphicon glyphicon-home" ></span></a> 22 </div> 23 </div> 24 <script src="http://cdn.bootcss.com/jquery/3.0.0-rc1/jquery.js"></script> 25 <script src=‘swipe.js‘></script> 26 </body> 27 </html>
然后脚本中加上以下代码，即可实现
1 $(window)
2 .on(‘load‘, function () {
3 var swipes = $(‘[data-ride="swipe"]‘)
4 swipes.each(function (index, item) {
5 var swipe = new Swipe(item)
6 swipe.init()
7 });
8 })
实现原理
- 定义了一个Swipe构造函数，主要通过对每一个item添加删除类，结合css的transform属性的translate3d()来实现滚动3d效果，这里只是实现一个简单的效果，具体的可以继续扩展
- CSS中主要有五个类来实现动画效果p0,p1,p2,p3,p4；
类p2是主要呈现的图片，初始化的时候会默认最中间的图片添加p2类，然后左边的图是p0，p1类，右边的是p3，p4类；
p0，p4主要是隐藏在后边的图片，设计这两个类是为了动画更加的流畅。
大概这么说吧，比如我们有7张图片，那么默认会初始化this.$itemIndenxArr=[0,0,1,2,3,4,4]；
然后根据 this.$itemIndenxArr 分别添加类 p0,p0,p1,p2,p3,p4,p4,就可以实现初始效果图如下：
- 在Swipe.prototype.prev以及Swipe.prototype.next中通过对this.$itemIndexArr的修改，来实现图片的滚动效果
当向左滚动，会修改 this.$itemIndenxArr=[4,0,0,1,2,3,4]；此时呈现在中间的就是第五张图
Swipe.prototype.slide判断滚动方向进行实际的滚动（即实际的添加删除类）
总结：
总得来说，实现原理不难，基本上实现了图片的响应式，以及任意图片添加都可以实现此轮播效果，对于以后实现都可以直接引入代码，感觉还是不错的
具体代码如下：
index.html
Swipe.js
Swipe.css
时间： 2024-10-23 14:33:42