jquery - 显示 3 张图片（如 Carousel）的幻灯片，其中包含一些指定的细节

Question

我需要制作一个幻灯片，它会显示三个图像，并像本网站中的那样滑动它们。

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

无论如何，我尝试了具有一些功能的“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);
    });
});

演示