Javascript 幻灯片滑动

Question

今天，我正在尝试创建一个图像幻灯片，其中会发生多种有趣的效果。

我想要实现的目标可以在这个链接中找到: http://themes.jozoor.com/invention/white/index.html .请注意，当您在主页上循环播放幻灯片时，图片和其他元素会滑入到位。

Answer 1

他们使用 Flexslider 并自行添加动画。 如果您查看 code你会发现

e(".flexslider").flexslider({
    animation:         "fade",
    animationLoop:     true,
    slideshow:         true,
    slideshowSpeed:    6e3,
    animationSpeed:    800,
    pauseOnHover:      true,
    pauseOnAction:     true,
    controlNav:        false,
    directionNav:      true,
    controlsContainer: ".flex-container",
    start:             function(t)
    {
        var n = e(".slider-1 .flex-active-slide h2").data("toptitle");
        var r = e(".slider-1 .flex-active-slide .item").data("topimage");
        var i = e(".slider-1 .flex-active-slide p").data("bottomtext");
        var s = e(".slider-1 .flex-active-slide .links").data("bottomlinks");
        e(".slider-1 .flex-active-slide").find(".item").css({top: r});
        e(".slider-1 .flex-active-slide").find(".item").animate({right: "0", opacity: "1"}, 1e3);
        e(".slider-1 .flex-active-slide").find("h2").animate({left: "0", top: n, opacity: "1"}, 1500);
        e(".slider-1 .flex-active-slide").find("p").animate({left: "0", bottom: i, opacity: "1"}, 1500);
        e(".slider-1 .flex-active-slide").find(".links").animate({left: "0", bottom: s, opacity: "1"}, 1800);
        t.removeClass("loading")
    },
    before:            function(t)
    {
        e(".slider-1 .flex-active-slide").find(".item").animate({
            right:   "-100%",
            opacity: "0"
        }, 1e3);
        e(".slider-1 .flex-active-slide").find("h2").animate({left: "0", top: "-100%", opacity: "0"}, 1500);
        e(".slider-1 .flex-active-slide").find("p").animate({left: "0", bottom: "-50%", opacity: "0"}, 1500);
        e(".slider-1 .flex-active-slide").find(".links").animate({
            left:    "0",
            bottom:  "-100%",
            opacity: "0"
        }, 1800)
    },
    after:             function(t)
    {
        var n = e(".slider-1 .flex-active-slide h2").data("toptitle");
        var r = e(".slider-1 .flex-active-slide .item").data("topimage");
        var i = e(".slider-1 .flex-active-slide p").data("bottomtext");
        var s = e(".slider-1 .flex-active-slide .links").data("bottomlinks");
        e(".slider-1 .flex-active-slide").find(".item").css({top: r});
        e(".slider-1 .flex-active-slide").find(".item").animate({right: "0", opacity: "1"}, 1e3);
        e(".slider-1 .flex-active-slide").find("h2").animate({left: "0", top: n, opacity: "1"}, 1500);
        e(".slider-1 .flex-active-slide").find("p").animate({left: "0", bottom: i, opacity: "1"}, 1500);
        e(".slider-1 .flex-active-slide").find(".links").animate({left: "0", bottom: s, opacity: "1"}, 1800)
    }
});