视觉效果非常吸睛的一款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>
暂无评论内容