function revolve(obj, num){ var $scroll = o.bjfind(".scroll"), $list = $scroll.find("ul"), $box = $scroll.find("li"), initwidth = 484, initheight = 368, $prev = obj.find(".prev"), $next = obj.find(".next"), $title = obj.find(".tips"), bl = true // 定义数组:width(initwidth * scale) / left / top(initheight * (1 - scale) / 2 ) / z-index numbers = [ [initwidth * 0.51, 0, initheight * 0.245, 1], [initwidth * 0.73, 106, initheight * 0.135, 2], [initwidth, 275, 0, 3], [initwidth * 0.73, 574, initheight * 0.135, 2], [initwidth * 0.51, 788, initheight * 0.245, 1] ] // $box默认样式 scale : 0; opacity: 0; $box.stop().transition({ scale : 1, opacity : 1 }, 400, "linear", function(){ $box.css("opacity", 0) if(num == 1){ $box.eq(0).css("opacity", "1") $scroll.height($box.find("img").height()) $title.html($box.eq(0).data("title")) } if(num == 3){ $box.eq(1).css("opacity", "1") for (var i = 0; i < 3; i++) { $box.eq(i).css("z-index", numbers[i + 1][3]).stop().animate({ width : numbers[i + 1][0], left : numbers[i + 1][1], top : numbers[i + 1][2], opacity : 1 }, 400, "linear") }; $title.html($box.eq(1).data("title")) } if(num == 5){ $box.eq(2).css("opacity", "1") for (var i = 0; i < 5; i++) { $box.eq(i).css("z-index", numbers[i][3]).stop().animate({ width : numbers[i][0], left : numbers[i][1], top : numbers[i][2], opacity : 1 }, 400, "linear") }; $title.html($box.eq(2).data("title")) } }) $next.on('click', next) function next(){ if(num == 1){ $list.find("li:first").stop().animate({ left : 100 + '%', opacity : 0 }, 400, "linear") $list.find("li:last").prependto($list).css("left", - 100 + '%').stop().animate({ left : 0, opacity : 1 }, 400, "linear") $title.html(obj.find("li").eq(0).data("title")) return } if(num == 3){ $list.find("li:last").prependto($list).css("z-index", numbers[0][3]).stop().animate({ width : numbers[1][0], left : numbers[1][1], top : numbers[1][2], opacity : 1 }, 400, "linear") for (var i = 0; i < 3; i++) { obj.find("li").eq(i).css("z-index", numbers[i + 1][3]).stop().animate({ width : numbers[i + 1][0], left : numbers[i + 1][1], top : numbers[i + 1][2], opacity : 1 }, 400, "linear") }; $title.html(obj.find("li").eq(1).data("title")) } if(num == 5){ $list.find("li:last").prependto($list).css("z-index", numbers[0][3]).stop().animate({ width : numbers[0][0], left : numbers[0][1], top : numbers[0][2], opacity : 1 }, 400, "linear") for (var i = 0; i < 5; i++) { obj.find("li").eq(i).css("z-index", numbers[i][3]).stop().animate({ width : numbers[i][0], left : numbers[i][1], top : numbers[i][2], opacity : 1 }, 400, "linear") }; $title.html(obj.find("li").eq(2).data("title")) } obj.find("li").eq(num).css({ opacity : 0, left : numbers[2][1], top : 0, width : initwidth }) } $prev.on('click', prev) function prev(){ if(num == 1){ $list.find("li:first").stop().animate({ left : - 100 + '%', opacity : 0 }, 400, "linear").appendto($list) $list.find("li:first").css("left", 100 + '%').stop().animate({ left : 0, opacity : 1 }, 400, "linear") $title.html(obj.find("li").eq(0).data("title")) return } obj.find("li").eq(0).css({ opacity : 0, left : numbers[2][1], top : 0, width : initwidth }).appendto($list) if(num == 3){ for (var i = 0; i < 3; i++) { obj.find("li").eq(i).css("z-index", numbers[i + 1][3]).stop().animate({ width : numbers[i + 1][0], left : numbers[i + 1][1], top : numbers[i + 1][2], opacity : 1 }, 400, "linear") }; $title.html(obj.find("li").eq(1).data("title")) } if(num == 5){ for (var i = 0; i < 5; i++) { obj.find("li").eq(i).css("z-index", numbers[i][3]).stop().animate({ width : numbers[i][0], left : numbers[i][1], top : numbers[i][2], opacity : 1 }, 400, "linear") }; $title.html(obj.find("li").eq(2).data("title")) } } touch.on(obj, "swipeleft", function(){ prev() }) touch.on(obj, "swiperight", function(){ next() }) // 响应部分 window.onresize = function(){ $next.off('click', next) $prev.off('click', prev) $(".revolve li").attr("style", "") if($(window).width() > 1220){ revolve($(".leadership .revolve"), 5) }else if($(window).width() > 1044 && $(window).width() < 1220){ revolve($(".leadership .revolve"), 3) }else{ revolve($(".leadership .revolve"), 1) } }; }