前言：最近在做一个音乐播放器，首页要做一个图片轮播，看了bootstrap的carousel插件以及移动端的swipe.js库，都是平面图片轮播的效果，所以自己想着实现类似网易云app里那种3d图片轮播的效果，所以写下此文.
源代码：here
demo演示: here
使用方法：
首先，引入Swipe.js和Swipe.css
html结构如下：
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>