如何用jQuery实现一个简单的3D轮播图
写功能的时候查了很多的demo。
各有好坏。
项目要求的功能很多、整理的时候把一些特殊功能都去掉了。
只留下轮播的效果。
效果如下:
核心代码 [AppleScript] 纯文本查看 复制代码 .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 [AppleScript] 纯文本查看 复制代码 <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的动画将其过渡到相应的位置。
我们的需求是展示3张图片、所以我只写了3个实体的位置class反正自己需要啥样的排版、自己写几个class就行了 [AppleScript] 纯文本查看 复制代码 .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添加相应的唯一标记、方便接下来获取。 [AppleScript] 纯文本查看 复制代码 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。都一个样)
基本就是为了兼容各种数量的图片。给他们一个初始的位置。
嗯、截取一段意思意思。 [AppleScript] 纯文本查看 复制代码 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了。 [AppleScript] 纯文本查看 复制代码 //右滑动function right(){ var fy = []; //我们需要将原来的每个位置class。依序放到数组里。
for(i=0;i<imgNub;i++){ //imgId最初设置的时候是0-X。取出相应位置class的时候自然也是有序的
fy=$(".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();
}
最后就是左右两张图的点击事件、每次移动之后刷一遍就行： [AppleScript] 纯文本查看 复制代码 $(".carousel .img").removeAttr("onclick");$(".carousel .img2").attr("onclick","left()");$(".carousel .img4").attr("onclick","right()");
最后、虽然我为了易懂把一些与效果无关的代码去掉了。但关于一些其他功能还是可以说两句。比如文字：
你完全可以在每个img的box里写一个p。然后隐藏掉。
在每次刷新完之后赋值给需要展示的p。(其实点击跳转的事件也是一个道理、把img3--也就是屏幕中央的那个img的跳转单独打开就行了) [AppleScript] 纯文本查看 复制代码 $('.list_title').html($('.img3').find(".li_title").text())[/i]
[i]$('.list_text').html($('.img3').find(".li_text").text())
自动轮播:
更没说的~加个定时器就行。
如果你要是干活、只想要一段代码。前端效果插件网站上一搜一大片、各种功能各种样式。
但是我看的都是万变不离其宗、所以我也没弄太多的功能上来。
这个demo是我觉得能讲清楚原理最简化的demo了。 | 
收藏
淘帖
踩
