按钮控制螺纹旋转按钮切换

来源:https://www.sucaihuo.com/js/1613.html 2017-04-01 23:05浏览(415) 收藏

这是一款按钮控制图片螺纹旋转切换代码。非常酷炫特效。
按钮控制螺纹旋转按钮切换
分类:html/css > 按钮 难易:初级
查看演示 下载资源 下载积分: 20 积分
$(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);
			});
标签: 旋转按钮
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2