先看下效果图:

看到这个酷炫的效果有没有很眼馋啊!接下来我们就一起来学习实现它吧。

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幻灯片的更多相关文章

  1. jquery触屏幻灯片

    一.前言 去年接触了移动Web开发,做了些手机端的网站及应用,还有些小的微信游戏和活动页面.每个项目里或多或少的都会有一些触屏事件等.其中有两个用到了jquery触屏幻灯片.刚开始的时候也在百度上搜索 ...

  2. 绝对炫的3D幻灯片-SLICEBOX

    绝对炫的3D幻灯片-SLICEBOX http://www.jq22.com/jquery-info31

  3. Codrops 教程:实现内容倾斜的 3D 幻灯片效果

    今天给大家分享的优秀教程来自 Codrops 网站,实现一个内容倾斜的 3D 幻灯片效果.我们平常见到的都是那种水平或者垂直滚动的效果,这个倾斜的内容滑动效果相信会让你眼前一亮.因为使用了 CSS 3 ...

  4. 全新jquery多点滑动幻灯片——全屏动画animateSlide

    首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片——全屏动画animateSlide(代码完全原创). 直接上代码,把h ...

  5. jQuery响应式幻灯片插件jquery.glide.js(支持触摸&轻量级)

    找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...

  6. jquery环形3D立体旋转特效

      jquery环形3D立体旋转特效 作者/代码整理:站长素材  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载)发布日期:2013-07-20   立体效果比较强的jquery特效,周围小图组 ...

  7. Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映

    前言: 如果你已经厌倦了使用PPT设置路径.设置时间.设置动画方式来制作动画特效.那么Impress.js将是你一个非常好的选择. 用它制作的PPT将更加直观.效果也是嗷嗷美观的. 当然,如果用它来装 ...

  8. css3+jquery制作3d旋转相册

    首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准 ...

  9. jQuery iPresenter 3D图片旋转

    在线实例 效果一 效果二 使用方法 <div class="htmleaf-container"> <div class="htmleaf-conten ...

随机推荐

  1. Swift,字典

    1.创建(Dictionary)字典(无序的可重复) (1)指定类型 var a:Dictionary<String,String>=["a":"b" ...

  2. SHAREPOINT 2013 + PROJECT 2013 资料网站

    1.http://technet.microsoft.com/zh-CN/sharepoint 2\ 博客圆专业讲解  http://www.cnblogs.com/jianyus/archive/2 ...

  3. git:FETCH_HEAD

    FETCH_HEAD: 是一个版本链接,记录在本地的一个文件中,指向着目前已经从远程仓库取下来的分支的末端版本. 举例说明:将远程origin仓库的xx分支合并到本地的yy分支.git fetch o ...

  4. flask的文件上传和下载

    http://flask.pocoo.org/docs/1.0/api/ http://docs.jinkan.org/docs/flask/api.html?highlight=download h ...

  5. [转载]Delphi Tokyo 10.2.3发布了

    转载:http://blog.sina.com.cn/s/blog_44fa172f0102wwwg.html 今早最好的消息,Delphi 10.2.3如期发布,下载地址:http://altd.e ...

  6. 【C/C++学院】0723-32位与64位/调戏窗体程序/数据分离算法/内存检索/二分查找法/myVC

    [送给在路上的程序猿] 对于一个开发人员而言,能够胜任系统中随意一个模块的开发是其核心价值的体现. 对于一个架构师而言,掌握各种语言的优势并能够运用到系统中,由此简化系统的开发,是其架构生涯的第一步. ...

  7. SRS Audio Sandbox没有声音怎么办

    首先介绍下这款软件呵: SRS Audio Sandbox是一款个人电脑终极音频增强软件.该软件可以提供令人叹为观止的环绕音效,重低音效果并且非常清晰,甚至可以用於桌面扬声器.可以作用於个人电脑上的所 ...

  8. How to get the url of a page in OpenERP?

    How to get the url of a page in OpenERP? User is using OpenERP. I have a button on one web page. The ...

  9. Android笔记:invalidate()和postInvalidate() 的区别及使用——刷新ui

    Android提供了Invalidate方法实现界面刷新,但是Invalidate不能直接在线程中调用,因为他是违背了单线程模型:Android UI操作并不是线程安全的,并且这些操作必须在UI线程中 ...

  10. CentOS最常用命令

    快捷键.常用命令: 文件和目录:# cd /home 进入 '/home' 目录# cd .. 返回上一级目录# cd ../.. 返回上两级目录# cd - 返回上次所在目录# cp file1 f ...