• 文章介绍
  • 评价建议
  • 视觉效果非常吸睛的一款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>
    

    OC共享平台----官方网址www.ocvoc.com 微信公众号ocvocc 可查询欧闪科技 本站免费资源 需要投广告,赞助的请多多支持,谢谢!
    欧闪科技---oc平台专业提供小程序源码|网站源码|Office素材|游戏服务端|棋牌源码服务端||装修素材|MAC软件下载|免费电影|教育资讯|视频点播|jquery特效 » jQuery 3D立体螺旋动画焦点图切换插件

    Leave a Reply

    提供最优质的资源集合

    立即查看 了解详情

    Optimized by WPJAM Basic