jquery写3D图片轮播效果
Posted xxger前端学习
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery写3D图片轮播效果相关的知识，希望对你有一定的参考价值。
国庆中秋小长假快来了，小伙伴们计划好要去哪里玩了吗？不过出游之前，前端小伙伴们估计还在为长假期间的活动页面努力奋战呢。这个3D图片轮播效果图也许你能用到。
如图，此demo实现轮播图3D显示，自动轮播，点击下面的红条切换到对应图片，点击左右箭头切换。
下面是主要代码
<style>
/*列表项的样式需要单独设置，最前面的正常显示，层级越高。越靠近底层，图片等比例缩小，透明度也减小，给人近大远小的视觉体验*/
.list1 {
transform: translate3d(250px, 150px, 0) scale(1);
opacity: 1;
z-index: 7;
}
.list2 {
transform: translate3d(560px, 100px, -20px) scale(0.7);
opacity: 0.8;
z-index: 6;
}
.list3 {
transform: translate3d(570px, 50px, -40px) scale(0.6);
z-index: 5;
opacity: 0.6;
}
.list4 {
transform: translate3d(300px, 0, -60px) scale(0.4);
opacity: 0.4;
z-index: 4;
}
.list5 {
transform: translate3d(20px, 50px, -40px) scale(0.6);
opacity: 0.6;
z-index: 5;
}
.list6 {
transform: translate3d(-105px, 100px, -20px) scale(0.7);
opacity: 0.8;
z-index: 6;
}
</style>
下面是html结构
<div class="slide-box">
<div class="slide">
<ul>
<li class="list1">
<a href="#"><img alt="" /></a>
</li>
<li class="list2">
<a href="#"><img alt="" /></a>
</li>
<li class="list3">
<a href="#"><img alt="" /></a>
</li>
<li class="list4">
<a href="#"><img alt="" /></a>
</li>
<li class="list5">
<a href="#"><img alt="" /></a>
</li>
<li class="list6">
<a href="#"><img alt="" /></a>
</li>
</ul>
</div>
<a href="javascript:;" class="prev btn"><</a>
<a href="javascript:;" class="next btn">></a>
<div class="buttons">
<a href="javascript:;" class="blue"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
<script>
//定义轮播横条
var $a = $(".buttons a");
//定义轮播列表项
var lArr = ["list1", "list2", "list3", "list4", "list5", "list6"];
var index = 0;
//进入页面自动开始定时器
time = setInterval(next, 2000);
//鼠标移入slide-box时清除定时器
$(".slide-box").mouseover(function() {
clearInterval(time);
})
//鼠标移出slide-box时开始定时器
$(".slide-box").mouseout(function() {
time = setInterval(next, 2000);
})
//点击向右箭头
$(".next").click(function() {
next();
});
//点击向左箭头
$(".prev").click(function() {
prev();
});
// 上一张
function prev() {
//unshift() 向数组的开头添加一个或更多元素，并返回新的长度
lArr.unshift(lArr[lArr.length - 1]);
//pop() 删除并返回数组的最后一个元素；
lArr.pop();
//i是元素的索引，从0开始；e为当前处理的元素；each循环，当前处理的元素移除所有的class，然后添加数组索引i的class
$("li").each(function(i, e) {
$(e).removeClass().addClass(lArr[i]);
});
index--;
if(index < 0) {
index = lArr.length - 1;
}
aShow();
}
// 下一张
function next() {
//push() 向数组的最后添加一个或更多元素，并返回新的长度
lArr.push(lArr[0]);
//shift() 把数组的第一个元素从其中删除，并返回第一个元素的值；
lArr.shift();
$("li").each(function(i, e) {
$(e).removeClass().addClass(lArr[i]);
});
index++;
if(index > lArr.length - 1) {
index = 0;
}
aShow();
}
//通过底部按钮点击切换
$a.each(function() {
$(this).click(function() {
var myindex = $(this).index();
var b = myindex - index;
if(b == 0) {
return;
} else if(b > 0) {
/*
* splice(0,b)的是从索引0开始,取出数量为b的数组
* 因为每次点击之后数组都被改变了,所以当前显示的这个照片的索引才是0
* 所以取出从索引0到b的数组,就是从原本的这个照片到需要点击的照片的数组
* 这时候原本的数组也将这部分数组进行移除了
* 再把移除的数组添加的原本的数组的后面
*/
var newArr = lArr.splice(0, b);
//$.merge() 合并两个数组内容到第一个数组
lArr = $.merge(lArr, newArr);
$("li").each(function(i, e) {
$(e).removeClass().addClass(lArr[i]);
});
index = myindex;
aShow();
} else if(b < 0) {
/*
* 因为b<0,所以取数组的时候是倒序来取的,也就是说我们可以先把数组的顺序颠倒一下
* 而b现在是负值,所以取出索引0到-b即为需要取出的数组
* 也就是从原本的照片到需要点击的照片的数组
* 然后将原本的数组跟取出的数组进行拼接
* 再次倒序,使原本的倒序变为正序
*/
lArr.reverse(); //reverse() 颠倒数组中元素的顺序
var oldArr = lArr.splice(0, -b);
lArr = $.merge(lArr, oldArr);
lArr.reverse();
$("li").each(function(i, e) {
$(e).removeClass().addClass(lArr[i]);
});
index = myindex;
aShow();
}
});
})
//改变底部按钮的背景色
function aShow() {
$a.eq(index).addClass("blue").siblings().removeClass("blue");
}
</script>
以上是关于jquery写3D图片轮播效果的主要内容，如果未能解决你的问题，请参考以下文章