jQuery实现3D幻灯片
先看下效果图:
看到这个酷炫的效果有没有很眼馋啊!接下来我们就一起来学习实现它吧。
1、看到效果后我们先分析这个dom要怎么实现!
首先我们要用一个大容器包裹内容,其次这个看起来像是3d效果的图片实际上是靠我们的视觉误差实现的。他通过改变图片的大小、透明度、zindex来实现的。说完原理你有没有思路了?
我们整理下思路看下通过jQuery应该怎么实现。
第一步先把这个视觉效果实现
首先是先处理每张图片,我们用li来放置每个图片,但是图片又分为三个部分,分别为左侧图片,右侧图片,和中间的图片。我们先实现中间的图片,他就是在整个容器的正中心,只需要position一下设置下位置就行了,那么右侧和左侧的图片是都是等比缩小,透明度依次下降,我们同样需要position定位一下,再把相应的height、width、zindex、opcity、left、top给它值即可。
第二部实现左右旋转的逻辑
在jQuery里面有prev 和next这两个方法,他们分别是可以获得前一个jQuery对象和后一个jQuery对象,当我们点击左侧按钮时,每个li去获得他前一个li的样式,如果他前一个li为空那么就获得最后一个li的样式然后做一个动画效果。这样每次点击都获得他的前一个样式我们是不是就能让整个轮播图动起来了!点击右侧按钮的逻辑一样。
第三部绑定事件
分别在两个按钮上绑定事件,如果是左侧按钮将传入’left‘参数,右侧则传入’right’参数,调用动画函数即可。
2、编写代码!
当我们整理好思路之后就可以开始编写代码了,首先让我们把html页面实现了!
下面是html代码:
<div class="content">
<div class="box_1">
<div class="left_btn"></div>
<ul class="ull">
<li id="lifirst"><img src="data:images/01.jpeg"></li>
<li><img src="data:images/02.jpeg"></li>
<li><img src="data:images/03.jpeg"></li>
<li><img src="data:images/04.jpeg"></li>
<li><img src="data:images/05.jpeg"></li>
<li><img src="data:images/06.jpeg"></li>
<li id="lilast"><img src="data:images/07.jpeg"></li>
</ul>
<div class="right_btn"></div>
</div>
</div>
这里是css代码:
.content{
margin:150px auto;
max-width:1000px;
font-size: 0px;
}
.box_1{
width: 1000px;
height: 270px;
position: relative;
}
.left_btn{
position: absolute;
height: 270px;
width: 180px;
z-index: ;
left:;
top: ;
background: url(http://112.74.131.10/tiduihulian/u7/3dslide/images/btn_l.png) no-repeat center center;
}
.right_btn{
height: 270px;
width: 180px;
z-index: ;
position: absolute;
right:;
top: ;
background: url(http://112.74.131.10/tiduihulian/u7/3dslide/images/btn_r.png) no-repeat center center;
}
.box_1 ul{
width: 1000px;
height: 270px;
position: relative;
}
.box_1 ul li{
position: absolute;
left: ;
top: ;
}
.box_1 ul li img{
display: block;
width: %;
height: %;
}
这里是效果图:
可以看到所有的li堆叠在了一起,下面我们开始初始化所有li的位置
引入jQuery先定义接下来要用到的数据下面是js代码
var setting = {
"posterWidth" : 640, //幻灯片第一帧的宽度
"posterHeight" : 270, //幻灯片第一帧的高度
"scale" : 0.8, //记录显示比例关系
"speed" : 500,
}
var lifirst=$('#lifirst'),//第一个li
lilast=$('#lilast'),//最后一个li
all=$('.ull li'),//所有的li
prev,//
next,
ali=all.slice(1),//出去第一帧的li
num=ali.size()/2,
lf = 180/num , //li每次左移的值
rightli=ali.slice(0,num),//去掉第一帧li的前一半
leftli=ali.slice(num),//后一半li
rw =setting.posterWidth,
rh =setting.posterHeight;
这里声明了一个对象setting里面的参数决定了轮播图第一帧的高宽和缩放比例以及动画时间,你可以通过改变这个参数来修改轮播图的大小。
初始化第一帧的位置代码如下:
lifirst.css({
width:rw,
height:rh,
left:(1000-rw)/2,
opcicty:1,
top:(270-rh)/2,
zIndex:num
})
剩余所有帧的位置代码如下:
function defau(){
//右侧基本属性
rightli.each(function(i){
var j=1 ;
num-- ;
rw = rw*setting.scale;
rh = rh*setting.scale; $(this).css({
zIndex :num,
width :rw,
height :rh,
opacity :1/(++j),
left :(1000-180)+(++i)*lf - rw,
//1000是窗口的宽度,180是一个按钮的宽度,相减加上i*lf为当前窗口到当前帧右侧距离,
//再减去当前帧的宽度就是当前帧左移的距离。
top : (270-rh)/2
});
})
var lw = rightli.last().width(),
lh = rightli.last().height(),
oloop=4;
//左侧基本属性
leftli.each(function(i){
$(this).css({
zIndex :i,
width :lw,
height :lh,
opacity :1/oloop,
left :i*lf ,
//设置每个li的top值
top : (270-lh)/2
});
lw = lw/setting.scale;
lh = lh/setting.scale;
oloop--;
})
}
defau();
初始化之后如图所示:
初始化之后如果点击左侧按钮那么我们只需要获取前一个帧的height、width、zindex、opcity、left、top值给当前帧,如果前一个帧不存在,就获得最后一帧的样式给当前帧,做一个动画即可,右侧同理。
下面是代码:
function anima(dir){
var zIndexArr=[];
if(dir === 'right'){
all.each(function(){
prev = $(this).prev().get(0)?$(this).prev():lilast; //判断前一个li是否存在,如果存在把他给prev,不存在则把最后一个li给当前帧
var width = prev.width(),
height =prev.height(),
opacity = prev.css("opacity"),
left = prev.css("left"),
top = prev.css("top"),
zIndex = prev.css("zIndex"); zIndexArr.push(zIndex);
$(this).animate({
width :width,
height :height,
opacity :opacity,
left :left,
top :top
},setting.speed,function(){
Flag = true;
});
});
//zIndex需要单独保存再设置,防止循环时候设置再取的时候值永远是最后一个的zindex
all.each(function(i){
$(this).css("zIndex",zIndexArr[i]);
});
}else if(dir ==='left'){
all.each(function(){ next = $(this).next().get(0)?$(this).next():lifirst;
var width = next.width(),
height =next.height(),
opacity = next.css("opacity"),
left = next.css("left"),
top = next.css("top"),
zIndex = next.css("zIndex"); zIndexArr.push(zIndex);
$(this).animate({
width :width,
height :height,
opacity :opacity,
left :left,
top :top
},setting.speed,function(){
Flag = true;
});
});
all.each(function(i){
$(this).css("zIndex",zIndexArr[i]);
});
}
}
现在只需要绑定上click事件酷炫的效果就实现了!
(为了防止在动画还没有执行完的时候就点击这里需要做一下处理用flag来判断,为真是在执行函数。)代码如下:
var Flag = true;
$('.right_btn').click(function(){
if(Flag){
Flag=false;
anima('right');
}
})
$('.left_btn').click(function(){
if(Flag){
Flag=false;
anima('left');
}
})
好了 激动的小伙伴们快去感受一下你们酷炫的效果吧!
jQuery实现3D幻灯片的更多相关文章
- jquery触屏幻灯片
一.前言 去年接触了移动Web开发,做了些手机端的网站及应用,还有些小的微信游戏和活动页面.每个项目里或多或少的都会有一些触屏事件等.其中有两个用到了jquery触屏幻灯片.刚开始的时候也在百度上搜索 ...
- 绝对炫的3D幻灯片-SLICEBOX
绝对炫的3D幻灯片-SLICEBOX http://www.jq22.com/jquery-info31
- Codrops 教程:实现内容倾斜的 3D 幻灯片效果
今天给大家分享的优秀教程来自 Codrops 网站,实现一个内容倾斜的 3D 幻灯片效果.我们平常见到的都是那种水平或者垂直滚动的效果,这个倾斜的内容滑动效果相信会让你眼前一亮.因为使用了 CSS 3 ...
- 全新jquery多点滑动幻灯片——全屏动画animateSlide
首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片——全屏动画animateSlide(代码完全原创). 直接上代码,把h ...
- jQuery响应式幻灯片插件jquery.glide.js(支持触摸&轻量级)
找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...
- jquery环形3D立体旋转特效
jquery环形3D立体旋转特效 作者/代码整理:站长素材 (转载请附加本文地址,带有“懒人原生”字样的谢绝转载)发布日期:2013-07-20 立体效果比较强的jquery特效,周围小图组 ...
- Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映
前言: 如果你已经厌倦了使用PPT设置路径.设置时间.设置动画方式来制作动画特效.那么Impress.js将是你一个非常好的选择. 用它制作的PPT将更加直观.效果也是嗷嗷美观的. 当然,如果用它来装 ...
- css3+jquery制作3d旋转相册
首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准 ...
- jQuery iPresenter 3D图片旋转
在线实例 效果一 效果二 使用方法 <div class="htmleaf-container"> <div class="htmleaf-conten ...
随机推荐
- 函数指针&指针函数
https://blog.csdn.net/luoyayun361/article/details/80428882
- 最短路径——Floyd,Dijkstra(王道)
题目描述: 在每年的校赛里,所有进入决赛的同学都会获得一件很漂亮的t-shirt.但是每当我们的工作人员把上百件的衣服从商店运回到赛场的时候,却是非常累的!所以现在他们想要寻找最短的从商店到赛场的路线 ...
- 使用curl向Solr导入json文件(Windows、Linux均可)
Linux环境下: 1.进入需要导入的文件所在路径 2.执行: curl "http://IP:8983/solr/目标集合名/update?commit=true" --data ...
- [Flutter] Creating, Importing & Using Dynamic Widgets from Other Files in a Flutter Application
In this lesson we’ll learn how to import widgets we’ve created in other files & use them in our ...
- vue - check-version
描述:check-versions.js,vue-cli中检查版本的js文件 使用:
- 别样JAVA学习(六)继承下(2.3)异常下
1.RuntimeException Exception中有一个特殊的子类异常RuntimeException执行时异常. 假设在函数内容抛出该异常,函数上能够不用声明.编译一样通过. 假设在函数上声 ...
- Zigbee事件
ZIGBEE事件有两类.系统定义事件和用户定义事件. 系统类事件是协议栈已定义好的.用户类事件是我们用户层面来定义的. 事件类号採用一个16bit的常量,使用独热码编码,独热码是仅仅有一个bit为1, ...
- TP框架I方法详解
TP框架I方法详解 I方法是ThinkPHP众多单字母函数中的新成员,其命名来自于英文Input(输入),主要用于更加方便和安全的获取系统输入变量,可以用于任何地方,用法格式如下:I('变量类型. ...
- 服务端渲染 SSR
1.概述 SSR:网站内容由服务端渲染,然后返回客户端(查看网页源代码,所有内容都在源代码里面). 2.SSR优势 (1)SSR利于SEO. (2)SSR减少请求量和客户端渲染时间.
- oracle data file header replace(測)
SQL> create tablespace rm_tbs datafile 'f1.dbf' size 10m; Tablespace created. SQL> select file ...