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>