注册 登录 充值会员 退出
网站、APP、小程序等定制开发,联系QQ 1206995177 毕业设计 java源码 PHP源码

充值

jQuery 3D立体螺旋动画焦点图切换插件

作者/代码整理:  (源码已亲测,不会安装的可以向QQ1915635791要安装视频教程) 发布日期:2023-03-31
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>