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>
具体效果看右侧的【在线演示】吧^_^
TAG标签:3D立体螺旋轮播图
上一个:jQuery极具创意的层叠文字焦点轮播图切换动画特效
下一个:jQuery制作古典风格手风琴图片切换收缩特效
精品源码
精品模板
免责声明:本站模板均来自用户分享和网络收集,仅供学习研究,请勿用于商业用途,若损害您的权利,请联系网站客服,核实后立即删除。