Question

今天我正在尝试创建一个图片幻灯片，其中有几个感兴趣的效果发生。

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

Answer 1

这是图层滑块朋友。如果您不想再次开始开发插件，那么只需购买图层滑块即可。使用layerslider搜索google。

像这样的滑块不容易开发。如果您已经开始，那么请向我们展示一些代码，否则购买现有代码

Answer 2

他们使用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)
    }
});

Javascript幻灯片滑动

2 个答案: