自带完整数据 快速建站好帮手
客服QQ客服QQ 客服微信客服微信 公众号公众号

jQuery制作3D立体螺旋动画焦点轮播图切换插件

特效介绍

这是一款jQuery制作3D立体螺旋动画焦点轮播图切换插件,视觉效果非常吸睛,图片切换方式类似垂直的螺旋叶片旋转。

js代码
<script src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function (){
var num = 0;
$("#j_silder_outer .img-item").each(function(index, el) {
$(this).css({
"left":$(this).width() * index + "px",
/*让每个img-item延时一定时间执行动画*/
"transitionDelay": index * 0.3 + "s"
});
$(this).find(".img").css({
"backgroundPosition": -$(this).width() * index + "px"
});;
});
 
$(".prev").on("click",function (){
$("#j_silder_outer .img-item").css("transform", "rotateX(" + (++num * 90) + "deg)");
});
 
$(".next").on("click",function (){
$("#j_silder_outer .img-item").css("transform", "rotateX(" + (--num * 90) + "deg)");
});
 
var timejg=4000;//轮播间隔时间
var time = setInterval(move,timejg);
function move(){
$("#j_silder_outer .img-item").css("transform", "rotateX(" + (--num * 90) + "deg)");
}
$('.slider-outer').hover(function(){
clearInterval(time);
},function(){
time = setInterval(move,timejg);
});
 
 
})
</script>

3D立体螺旋轮播图

TAG标签:3D立体螺旋轮播图

上一个:jQuery极具创意的层叠文字焦点轮播图切换动画特效
下一个:jQuery制作古典风格手风琴图片切换收缩特效

免责声明:本站模板均来自用户分享和网络收集,仅供学习研究,请勿用于商业用途,若损害您的权益,请联系网站客服,核实后立即删除。

咨询客服

QQ:1847629575

全年 09:00-23:00

(其他时间请留言)

在线客服

Copyright©2021 www.why114.com 瓦窑源码 版权所有 鲁ICP备20017802号

展开