码迷,mamicode.com
首页 > 其他好文 > 详细

实现一个图片轮播-3d播放效果

时间:2017-01-23 19:11:15      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:http   实现   hicon   src   box   btn   设计   port   技术   

前言:最近在做一个音乐播放器,首页要做一个图片轮播,看了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   })

实现原理

  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判断滚动方向进行实际的滚动(即实际的添加删除类)

 

总结:

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

 

具体代码如下:

index.html

技术分享View Code

Swipe.js

技术分享View Code

Swipe.css

技术分享View Code

实现一个图片轮播-3d播放效果

标签:http   实现   hicon   src   box   btn   设计   port   技术   

原文地址:http://www.cnblogs.com/kasmine/p/6343921.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!