前言：最近在做一个音乐播放器，首页要做一个图片轮播，看了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. spring-cloud-kubernetes与k8s的configmap

    本文是<spring-cloud-kubernetes实战系列>的第六篇,主要内容是在kubernetes上部署一个java web应用,该应用使用了spring-cloud-kubern ...

  2. HDU 4280 Island Transport（无向图最大流）

    HDU 4280:http://acm.hdu.edu.cn/showproblem.php?pid=4280 题意: 比较裸的最大流题目,就是这是个无向图,并且比较卡时间. 思路: 是这样的,由于是 ...

  3. HDU2874 Connections between cities 最近公共祖先

    第一次按常规的方法求,将所有的查询的u,v,和最近公共祖先都保存起来,然后用tarjan+并查集求最近公共祖先.因为询问的次数过多,所以在保存查询的时候总是MLE,后来参考了一下别人的代码,才突然觉悟 ...

  4. POJ-1860 Currency Exchange( Bellman_Ford, 正环 )

    题目链接:http://poj.org/problem?id=1860 Description Several currency exchange points are working in our ...

  5. codeforces 465 C. No to Palindromes!（暴力+思维）

    题目链接:http://codeforces.com/contest/465/problem/C 题意:给出一个不存在2个或以上回文子串的字符串,全是由小写字母组成而且字母下表小于p,问刚好比这个字符 ...

  6. 工作中遇到的99%SQL优化，这里都能给你解决方案(二)

    -- 示例表 CREATE TABLE `employees` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(24) NOT NULL ...

  7. c语言实现去除字符串首尾空格

    字符串内存图如下: 引入头文件: 1 #include<stdlib.h> 2 #include<stdio.h> 3 #include<string.h> 函数原 ...

  8. Springboot源码分析之TypeFilter魔力

    摘要: 在平常的开发中,不知道大家有没有想过这样一个问题,为什么我们自定义注解的时候要使用spring的原生注解(这里指的是类似@Component,@Service........),要么就是 随便 ...

  9. Git的使用（三）远程仓库添加及克隆

    Git是分布式版本控制系统,同一个Git仓库,可以分布到不同的机器上.怎么分布呢?最早,肯定只有一台机器有一个原始版本库,此后,别的机器可以“克隆”这个原始版本库,而且每台机器的版本库其实都是一样的, ...

  10. IDEA中全局搜索不起作用，解决办法

    众所周知IDEA中全局搜索的快捷键是Ctrl+Shift+F,但是今天却碰到了用不了的情况,其实软件坏了的可能性很小,那就要从外部再来找原因,查看自己开的软件,一一查看快捷键,看是否是快捷键冲突: 1 ...