瓦窑源码 快速建站好帮手

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制作古典风格手风琴图片切换收缩特效

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

瓦窑源码网专注织梦网站源码与静态模板分享,提供织梦模板,dedecms模板,织梦企业源码,dedecms商业源码和织梦免费模板下载

整站源码 - 静态模板 - 网页特效 - CMS教程 - 站长指南 - 热门排行 - XML - HTML - TAG - 免责声明

Copyright© 2021 瓦窑源码 WHY114.COM 版权所有 鲁ICP备20017802号-2

客服QQ:1847629575 微信号:qilujianzhan

展开