前言：最近在做一个音乐播放器，首页要做一个图片轮播，看了bootstrap的carousel插件以及移动端的swipe.js库，都是平面图片轮播的效果，所以自己想着实现类似网易云app里那种3d图片轮播的效果，所以写下此文.

源代码：here

demo演示: here

使用方法：

首先，引入Swipe.js和Swipe.css

html结构如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>图片轮播3d效果</title>

   <link rel="stylesheet" href="swipe.css">

 </head>

 <body>

   <div class="slide_box">

            <ul class="slide_list swipe" id="swipe_list" data-ride='swipe'>

              <li class="item">

                <a href="" class="slide_list_link">

                  <img src="https://y.gtimg.cn/music/common/upload/t_focus_info_iphone/67011.jpg" alt="" class="slide_list_pic">

                </a>

              </li>

            </ul>

          <div class="slide_action">

              <a href="##" class="slide_action_btn-left"><span class=" glyphicon glyphicon-home" ></span></a>

              <a href="##" class='slide_action_btn-right'><span class=" glyphicon glyphicon-home" ></span></a>

          </div>

        </div>

        <script src="http://cdn.bootcss.com/jquery/3.0.0-rc1/jquery.js"></script>

        <script src='swipe.js'></script>

 </body>

 </html>

然后脚本中加上以下代码，即可实现

 $(window)

   .on('load', function () {

     var swipes = $('[data-ride="swipe"]')

     swipes.each(function (index, item) {

       var swipe = new Swipe(item)

       swipe.init()

     });

   })

实现原理

  1. 定义了一个Swipe构造函数，主要通过对每一个item添加删除类，结合css的transform属性的translate3d()来实现滚动3d效果，这里只是实现一个简单的效果，具体的可以继续扩展
  2. 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,就可以实现初始效果图如下：

  1. 在Swipe.prototype.prev以及Swipe.prototype.next中通过对this.$itemIndexArr的修改，来实现图片的滚动效果

当向左滚动，会修改 this.$itemIndenxArr=[4,0,0,1,2,3,4]；此时呈现在中间的就是第五张图

Swipe.prototype.slide判断滚动方向进行实际的滚动（即实际的添加删除类）

总结：

    总得来说，实现原理不难，基本上实现了图片的响应式，以及任意图片添加都可以实现此轮播效果，对于以后实现都可以直接引入代码，感觉还是不错的

更全面的内容请看 这一篇 《3D轮播插件》

具体代码如下：

index.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>图片轮播3d效果</title>

   <link rel="stylesheet" href="swipe.css">

 </head>

 <body>

   <div class="slide_box">

            <ul class="slide_list swipe" id="swipe_list" data-ride='swipe'>

              <li class="item">

                <a href="" class="slide_list_link">

                  <img src="https://y.gtimg.cn/music/common/upload/t_focus_info_iphone/67011.jpg" alt="" class="slide_list_pic">

                </a>

              </li>

            </ul>

          <div class="slide_action">

              <a href="##" class="slide_action_btn-left"><span class=" glyphicon glyphicon-home" ></span></a>

              <a href="##" class='slide_action_btn-right'><span class=" glyphicon glyphicon-home" ></span></a>

          </div>

        </div>

        <script src="http://cdn.bootcss.com/jquery/3.0.0-rc1/jquery.js"></script>

        <script src='swipe.js'></script>

 </body>

 </html>

Swipe.js

 var Swipe = function (element) {

   this.$element = $(element)

   this.$item = $(element)

     .children('.item')

   this.$length = $(element)

     .children('.item')

     .length

   this.$itemIndexArr = []

   for (var i = 0, len = this.$length; i < len; i++) {

     if (i < Math.floor(len / 2))

       this.$itemIndexArr[i] = 0

     else if (i > Math.floor(len / 2))

       this.$itemIndexArr[i] = 4

     if (i == Math.floor(len / 2) - 1)

       this.$itemIndexArr[i] = 1

     if (i == Math.floor(len / 2))

       this.$itemIndexArr[i] = 2

     if (i == Math.floor(len / 2) + 1)

       this.$itemIndexArr[i] = 3

   }

 }

 Swipe.prototype.DEFAULTS = {

   interval: 3000,

   pause: 'hover'

 }

 Swipe.prototype.init = function () {

   var that = this

   that.$item.each(function (index, item) {

     $(item)

       .addClass('p' + that.$itemIndexArr[index])

   })

   that.cycle()

   var links = this.$element.siblings('.slide_action')

     .find('a')

   links.each(function (index, item) {

     var type = $(item)

       .attr('class')

       .match(/left/) ? 'prev' : 'next'

     switch (type) {

       case 'prev':

         $(this)

           .bind('click', function () {

             that.prev()

           })

         break;

       case 'next':

         $(this)

           .bind('click', function () {

             that.next()

           })

         break;

     }

   });

 }

 Swipe.prototype.cycle = function () {

   var that = this

   var cycleInterval = setInterval(function () {

     return that.next()

   }, that.DEFAULTS.interval)

 }

 Swipe.prototype.next = function () {

   var len = this.$length

   var indexArr = this.$itemIndexArr

   this.$itemIndexArr = indexArr.map(function (item, index) {

     if (item === 4 && indexArr[(index + 1) % len] === 0) {

       return 0;

     } else if (item === 4) {

       return 4;

     }

     return item + 1;

   })

   return this.slide();

 }

 Swipe.prototype.prev = function () {

   var len = this.$length

   var indexArr = this.$itemIndexArr

   this.$itemIndexArr = indexArr.map(function (item, index) {

     if (item === 0 && indexArr[(index + len - 1) % len] === 4) {

       return 4;

     } else if (item === 0) {

       return 0;

     }

     return item - 1;

   })

   return this.slide();

 }

 Swipe.prototype.slide = function () {

   var indexArr = this.$itemIndexArr

   this.$item.removeClass('p0 p1 p2 p3 p4')

   this.$item.each(function (index, item) {

     $(item)

       .addClass('p' + indexArr[index])

   })

 }

Swipe.css

 @media (min-width : 996px){

   html {

     font-size: 102.4px;

   }

 }

 @media (min-width : 667px) and (max-width :996px){

   html {

     font-size: 66.7px;

   }

 }

 @media (min-width : 375px) and (max-width : 667px){

   html {

     font-size: 37.5px;

   }

 }

 /* =============================================================

    Swiper styles

    ========================================================================== */

 .slide_box {

   position: relative;

   overflow: hidden;

   width: 10rem;

   margin-bottom: 25px;

   height: 4.5rem;

 }

 .slide_list {

   position: relative;

   width: 9rem;

   max-height: 361px;

 }

 .slide_list>.item {

   position: absolute;

   display: inline-block;

   top:;

   /* left: 0; */

   width: 7rem;

   left: calc(50% - 3rem);

   height: 4.5rem;

   max-height: 325px;

   /* margin: 0 auto; */

   /*opacity: 0;*/

   filter: alpha(opacity=0);

   z-index:;

   -webkit-transition: all 300ms ease-in-out;

   -ms-transition: all 300ms ease-out;

   transition: all 300ms ease-out;

 }

 .slide_list>.item.p2 {

   z-index:;

 }

 .slide_list>.item.p1 {

     /*向左移动 并且放小*/

   -webkit-transform: translate3d(-116px,0,0) scale(0.81);

   transform: translate3d(-116px,0,0) scale(0.81);

 }

 .slide_list>.item.p1,.slide_list>.item.p3{

   opacity: .8;

   filter: none;

 }

 .slide_list>.item.p0,.slide_list>.item.p4{

   opacity:;

   filter: none;

 }

 /*向左滚动*/

 .slide_list>.item.p1{

   transform-origin: 0 50%;

 }

 /*向右滚动*/

 .slide_list>.item.p3 {

   transform-origin: 100% 50%;

 }

 .slide_list>.item.p0 {

   -webkit-transform: translate3d(-328pxpx,0,0) scale(0.41);

   transform: translate3d(-328px,0,0) scale(0.41);

 }

 .slide_list>.item.p3 {

   -webkit-transform: translate3d(116px,0,0) scale(0.81);

   transform: translate3d(116px,0,0) scale(0.81);

 }

 .slide_list>.item.p4 {

   -webkit-transform: translate3d(328px,0,0) scale(0.41);

   transform: translate3d(328px,0,0) scale(0.41);

 }

 @media screen and (min-width:960px) {

   .slide_list>.item {

     left: calc(50% - 3.5rem);

   }

 }

 .event_list_pic {

   width: 100%;

   height: 100%;

 }

 .slide_list_link {

   /* width: 10%; */

   height: 100%;

 }

 .slide_list_pic {

   width: 100%;

 }

 .slide_action {

   position: absolute;

   top:;

   width: 100%;

   height: 100%;

   overflow: hidden;

 }

 [class^=slide_action_btn] {

   position: absolute;

   top: 50%;

   margin-top: -54px;

   width: 72px;

   height: 108px;

   background: rgba(153,153,153,.4);

   opacity:;

   visibility: none;

   transition-property: opacity,transform;

   transition-duration: .5s;

   z-index:;

 }

 [class^=slide_action_btn]:hover {

   opacity: 1.0;

 }

 .slide_action-left,.slide_action_btn-left {

   left:;

 }

 .slide_sction-right,.slide_action_btn-right {

   right:;

 }

实现一个图片轮播-3d播放效果的更多相关文章

  1. Angular2组件与指令的小实践——实现一个图片轮播组件

    如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...

  2. 基于ionic框架封装一个图片轮播指令的几点

    在这里我想在项目中封装一个图片轮播的指令 (本项目使用的是ionic框架) 1)定义指令 define(['app'],function(myapp){ myapp.directive('myslid ...

  3. css3实践之摩天轮式图片轮播+3D正方体+3D标签云（perspective、transform-style、perspective-origin）

    本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...

  4. Vue学习—Vue写一个图片轮播组件

    1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内 ...

  5. 让boostrap的图片轮播支持滑动效果

    因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果. 然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有 ...

  6. VUE开发一个图片轮播的组件

    完成效果图如下: vue开发的思路主要是数据绑定,代码如下: <template> <div ref="root" style="user-select ...

  7. UIScrollView,UIPageControl,UIImageView 实现图片轮播的效果

    上一篇博客介绍了如何将XCode创立的项目提交到Git版本控制,这次就直接做一个图片轮播的展示demo,刚好可以把UIScrollView.UIPageControl.UIImageView这三个控件 ...

  8. UIScrollView实现图片轮播器及其无限循环效果

    图片轮播器: 一.实现效果 实现图片的自动轮播            二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" ...

  9. CSS3图片轮播效果

    原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...

随机推荐

  1. NLP（十七） 利用DNN对Email分类

    数据集 scikit-learn中20个新闻组,总邮件18846,训练集11314,测试集7532,类别20 from sklearn.datasets import fetch_20newsgrou ...

  2. Navicat for mysql建立连接

    1. 安装Navicat for MySQL. 2. 点击连接->MySQL,打开SSH,填写主机名.端口.用户名.密码. 3. 连接->打开常规,设置连接名(可以自由指定).主机名.端口 ...

  3. python中的全局变量

    1. 在函数中定义的局部变量如果和全局变量同名,则会使用局部变量(即隐藏全局变量). 示例: x = 1 def func(): x = 2 print x func() print x 运行结果: ...

  4. HDU- 3605 - Escape 最大流 + 二进制压位

    HDU - 3605 : acm.hdu.edu.cn/showproblem.php?pid=3605 题目: 有1e5的的人,小于10个的星球,每个星球都有容量,每个人也有适合的星球和不适合的星球 ...

  5. cogs2823求组合数（lucas定理

    http://cogs.pro:8080/cogs/problem/problem.php?pid=vNQJJVUVj 再写个数学水题,其实lucas适用于m,n比较大而p比较小的情况. 题意:给出两 ...

  6. Kubernetes集群部署核心步骤

    目录 前言 一.所有节点安装docker 二.所有节点安装kubeadm 三.安装master节点 四.部署网络插件 五.安装node节点 六.运行一个demo 前言 这里使用环境:Ubuntu 18 ...

  7. 【Offer】[26] 【树的子结构】

    题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 输入两棵二叉树A和B,判断B是不是A的子结构.图中右边的树是左边的子结构  思路分析 先对树A进行遍历,找到与树B的根结点值相同的节点 ...

  8. Winform中通过代码设置DevExpress的TextEdit的类型为Numbernic

    场景 使用DevExpress的EditText控件时,需要限制其输入类型为数字. 正常来说是窗体上拖拽一个TextEdit,然后在设计窗口点击小三角,选择Change Mask 但是如果说TextE ...

  9. charles 端口转发

    本文参考:charles 端口转发 端口转发 端口转发(Port forwarding),有时被叫做隧道,是安全壳(SSH) 为网络安全通信使用的一种方法.端口转发是转发一个网络端口从一个网络节点到另 ...

  10. 进击的.NET 在云原生时代的蜕变

    你一定看过这篇文章 <进击的 Java ,云原生时代的蜕变>,  本篇文章的灵感来自于这篇文章.明天就将正式发布.NET Core 3.0, 所以写下这篇文章让大家全面认识.NET Cor ...