Question

我需要制作一个幻灯片，它会显示三张图像并将其滑动到与this website中的图像完全相同的位置。

唯一的区别是我需要第一张和第三张幻灯片是透明的，所以只有中间（活动）幻灯片才能完全可见，并改变标题的设计。

无论如何，我尝试了'Cycle2'插件，它有一些功能，但我不能像我想的那样使用它（总是居中并切出其他幻灯片的两侧）。

Answer 1

MovingBoxes插件可以帮助你。

$(window).load(function() {
    var slideShowDelay = 4000, // 4000 millisecond = 4 seconds
            timer,
            mb = $('#slider').data('movingBoxes'),
            loop = function() {
        // if wrap is true, check for last slide, then stop slideshow
        if (mb.options.wrap !== true && mb.curPanel >= mb.totalPanels) {
            // click the button to pause
            $('button.slideshow').trigger('click');
            return;
        }
        // next slide, use mb.goBack(); to reverse direction
        mb.goForward();
        // run loop again
        timer = setTimeout(function() {
            loop();
        }, slideShowDelay);
    };
    // toggle slideshow button
    $('button.slideshow')
            .attr('data-mode', "false") // slideshow paused
            .click(function() {
        clearTimeout(timer);
        // slide show mode
        var mode = $(this).attr('data-mode') === "false",
                // button text, replace with <img> if desired
                button = mode ? "Pause" : "Play";
        if (mode) {
            loop();
        }
        $(this).attr('data-mode', mode).html(button);
    });
});

Demo

幻灯片显示3个图像（如Carousel），带有一些指定的细节

1 个答案: