如何用jQuery实现一个简单的3D轮播图
demo1.jpg
写功能的时候查了很多的demo。
各有好坏。
恰巧自己也是刚转前端。索性摸索自己写了一个。
项目要求的功能很多、整理的时候把一些特殊功能都去掉了。
只留下轮播的效果。
效果如下:
4868e4a9-be3f-4d26-9b0d-34e999b3aabc.gif
-
核心代码
.carousel .img{
overflow: hidden;
position: absolute;
transition: width 0.4s,height 0.4s,top 0.4s,left 0.4s,z-index 0.4s;
}
轮播的时候图片移动和缩放、归功于class---img
<div class="carousel">
<div class="img">
img/text等
</div>
<div class="img">
img/text等
</div>
</div>
盒子不一定非要用div、用ul、li啥的都一个样。只要class设置成img就行。哪怕你懒得在这里设置、js里循环大盒子carousel去设置img也是一样的。再或者carousel.li{...}设置、总之只要给他动画属性就行了。都一个样
之后、之后设定好各自图片的位置class(img1/2/3/4/5)就好了
在对各自位置class进行重新分配的时候、会由class--img的动画将其过渡到相应的位置。
98d7bee6-adb7-4aed-83e0-65ac2d61579a.gif
我们的需求是展示3张图片、所以我只写了3个实体的位置class
反正自己需要啥样的排版、自己写几个class就行了
.slide .img1{
width: 0px;
height: 0px;
top: 30%;
left: -50%;
z-index: 1;
}
.slide .img2{
width: 500px;
height: 200px;
top: 20%;
left: -20%;
z-index: 2;
}
.slide .img3{
width: 840px;
height: 340px;
top: 10%;
left: 15%;
z-index: 3;
}
.slide .img4{
width: 500px;
height: 200px;
top: 20%;
left: 60%;
z-index: 2;
}
.slide .img5{
width: 0px;
height: 0px;
top: 30%;
left: 110%;
z-index: 1;
}
接下来。就交由js进行了
-
首先。要给每个img添加相应的唯一标记、方便接下来获取。
imgNub = $(".carousel .img").size();
//获取轮播图片数量
for(i=0;i<imgNub;i++){
$(".carousel .img:eq("+i+")").attr("imgId",i);
}
然后为相应位置的img配置初始位置。
我展示出来了3张。img2在左、img3在中间、img4在右侧。img1/5隐藏掉了。(如果你先展示出来5张、就再加个img0、img6。都一个样)
基本就是为了兼容各种数量的图片。给他们一个初始的位置。
嗯、截取一段意思意思。
if(imgNub>3&&imgNub<6){
//img 1、2、3、4、(5)
for(i=0;i<imgNub;i++){
$(".carousel .img:eq("+i+")").addClass("img"+(i+1));
}
}
经过以上半手动设置。每个img有了自己的位置class以及唯一的标识id。
接下来、只要实现左右滑动就OK了。
//右滑动
function right(){
var fy = [];
//我们需要将原来的每个位置class。依序放到数组里。
for(i=0;i<imgNub;i++){
//imgId最初设置的时候是0-X。取出相应位置class的时候自然也是有序的
fy[i]=$(".carousel .img[imgId="+i+"]").attr("class");
}
for(i=0;i<imgNub;i++){
if(i==0){
//将最左边图移动到最右边、实现轮播。0->5
$(".carousel .img[imgId="+i+"]").attr("class",fy[imgNub-1]);
}else{
//其他依次后(左)移:1->0 2->1....
$(".carousel .img[imgId="+i+"]").attr("class",fy[i-1]);
}
}
imgClicked();
}
最后就是左右两张图的点击事件、每次移动之后刷一遍就行：
$(".carousel .img").removeAttr("onclick");
$(".carousel .img2").attr("onclick","left()");
$(".carousel .img4").attr("onclick","right()");
最后、虽然我为了易懂把一些与效果无关的代码去掉了。但关于一些其他功能还是可以说两句。
比如文字：
你完全可以在每个img的box里写一个p。然后隐藏掉。
在每次刷新完之后赋值给需要展示的p。(其实点击跳转的事件也是一个道理、把img3--也就是屏幕中央的那个img的跳转单独打开就行了)
$('.list_title').html($('.img3').find(".li_title").text())
$('.list_text').html($('.img3').find(".li_text").text())
自动轮播:
更没说的~加个定时器就行。
如果你要是干活、只想要一段代码。前端效果插件网站上一搜一大片、各种功能各种样式。
但是我看的都是万变不离其宗、所以我也没弄太多的功能上来。
这个demo是我觉得能讲清楚原理最简化的demo了。
