实现一个图片轮播-3d播放效果
前言：最近在做一个音乐播放器，首页要做一个图片轮播，看了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()
});
})
实现原理
- 定义了一个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判断滚动方向进行实际的滚动（即实际的添加删除类）
总结：
总得来说，实现原理不难，基本上实现了图片的响应式，以及任意图片添加都可以实现此轮播效果，对于以后实现都可以直接引入代码，感觉还是不错的
更全面的内容请看 这一篇 《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播放效果的更多相关文章
- Angular2组件与指令的小实践——实现一个图片轮播组件
如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...
- 基于ionic框架封装一个图片轮播指令的几点
在这里我想在项目中封装一个图片轮播的指令 (本项目使用的是ionic框架) 1)定义指令 define(['app'],function(myapp){ myapp.directive('myslid ...
- css3实践之摩天轮式图片轮播+3D正方体+3D标签云（perspective、transform-style、perspective-origin）
本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...
- Vue学习—Vue写一个图片轮播组件
1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内 ...
- 让boostrap的图片轮播支持滑动效果
因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果. 然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有 ...
- VUE开发一个图片轮播的组件
完成效果图如下: vue开发的思路主要是数据绑定,代码如下: <template> <div ref="root" style="user-select ...
- UIScrollView,UIPageControl,UIImageView 实现图片轮播的效果
上一篇博客介绍了如何将XCode创立的项目提交到Git版本控制,这次就直接做一个图片轮播的展示demo,刚好可以把UIScrollView.UIPageControl.UIImageView这三个控件 ...
- UIScrollView实现图片轮播器及其无限循环效果
图片轮播器: 一.实现效果 实现图片的自动轮播 二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" ...
- CSS3图片轮播效果
原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...
随机推荐
- PHP文件基础操作
文件的基本操作:(更多) fopen():文件打开 $file = fopen("file.txt","r+"); fopen()函数的参数是目标文件的路径和文 ...
- TypeError: _obtain_input_shape() got an unexpected keyword argument 'include_top'
报错 Traceback (most recent call last): File "D:/PyCharm 5.0.3/WorkSpace/3.Keras/2.Application中五款 ...
- 关于工作流引擎ccflow待办分类 研究与技术实现
关于工作流引擎待办分类 研究与技术实现 关键字:工作流引擎 BPM系统 待办类型 名词:待办 概要介绍:待办就是当前的登录人员要处理的工作,在工作流程里面的节点类型不同,业务场景不同,我们把待办分为如 ...
- CodeForces - 940E - Cashback +贪心+DP
传送门:CodeForces - 940E - Cashback 题意:在一个长度为n的数组中,可以分出长度为 k 连续的多个数组b(每个数组 b 的 k 可不相同),然后,可以对每个数组 b 进行删 ...
- codeforces 688 E. The Values You Can Make（01背包+思维）
题目链接:http://codeforces.com/contest/688/problem/E 题解:设dp[s1][s2]表示s1状态下出现s2是否合理.那么s1显然可以更具01背包来得到状态.首 ...
- CentSO7.6下部署Maridb Galera Cluster 实践记录（一）
根据目前系统业务发展,预计未来上集成的概率异常之高,所以提前学习如何部署,网上尽管有很多这方面资料,但是真正适合自己的只有实践过的. 很奇怪目前的yum资源库里面为什么没有galera资源,目前只能通 ...
- Go操作NSQ
NSQ是目前比较流行的一个分布式的消息队列,本文主要介绍了NSQ及Go语言如何操作NSQ. NSQ NSQ介绍 NSQ是Go语言编写的一个开源的实时分布式内存消息队列,其性能十分优异. NSQ的优势有 ...
- MySql创建索引、删除索引、新增字段、删除字段、修改字段语句
--------------------------------------------------------- -- ALTER TABLE 创建索引 ---------------------- ...
- AutoCompleteTextView自动完成文本框
AutoCompleteTextView是从EditText派生出来的,比普通编辑框多了一个功能,当用户输入一定字符后,自动完成文本框会显示一个下拉单,供用户选择,当选中一个后,被选中的内容会显示在文 ...
- VUE从入门到放弃（项目全流程）————VUE
VUE从入门到放弃(第一天)--整体流程 先想想一个项目,vue项目是从什么到什么,然后再什么的?那是什么呢? 搭建 ( vue-cli) 代码内容 运行 封装 成品 一.搭建(脚手架vue-cli) ...