本文由 资源共享网 – admin 发布，转载请注明出处，如有问题请联系我们！jQuery 3D立体螺旋动画焦点图切换插件

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

js代码

<script src="https://img.x22t.com/file/2020/04/25/c85c83f516a96f8c4f307518c2360d9b7628.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>