javascript - jQuery 照片轮播（看起来像真正的轮播）？

Question

我正在寻找一个 jQuery 照片轮播，它可以一次显示 3 张图像，并在 x 数量的照片中循环（当到达最后一张时，再次从第一张照片开始）。

我快速模拟了我正在寻找的东西：

所以有 3 张照片可见，中间的一张是“主要”一张，比前一张和下一张（左和右）大一点。单击下一张/上一张箭头后，下一张或上一张照片滑入中间，从而成为主照片。

关于在哪里可以找到这样的 jQuery 插件/脚本的任何想法？

Answer 1

更新 3 改进版（带 Fancybox）

这是为了所有要求我这样做的人！;)

演示： http ://so.lucafilosofi.com/jquery-photo-carousel-that-looks-like-a-real-carousel/

---

这仅适用于OP：

更新 2 - 带有（下一个上一个）按钮 -演示：http: //jsbin.com/iduyu

$(function() {
$('.carousel').carousel();
});

(function($) {
$.fn.carousel = function() {
// 5 minutes lightweight carousel
// Copyright/Author (c) Luca Filosofi > aseptik@gmail.com
// License Public
    $carousel = $(this);
    $carousel.wrap('<div id="carousel_wrapper"></div>');
    $carousel.parent().append('<div class="button" id="left"></div>'+
                              '<div class="button" id="right"></div>');

    $('img',this).attr('class', 'inactive');
    $('img:eq(1)',this).attr('class', 'left');
    $('img:eq(2)',this).attr('class', 'active');
    $('img:eq(3)',this).attr('class', 'right');

    $carousel.fadeIn(500);

    $('.button').live('click', function(e) {
        e.preventDefault();

        var mode = this.id;
        var $button = $('.' + mode );

        $button.css({ 
            'z-index' : 9999 , 
            'opacity': 0.8
        }).animate({
            'left': '90px',
            'width': '320px',
            'top': '0px',
            'opacity': 1
        }, 500, function() {

          //lightbox
          $(this).attr({'class':'active'})
          .removeAttr('style');
        });

        $button.prev().css({
            'opacity': 0.5 
        }).animate({
            'left': '0px',
            'width': '240px',
            'top': '30px',
            'opacity': 1
        }, 400, function() {

            $(this).attr('class', 'left').removeAttr('style');
            $(this).prevAll().attr('class', 'inactive');
        });

        $button.next().css({
            'opacity': 0.5 
        }).animate({
            'left': '260px',
            'width': '240px',
            'top': '30px',
            'opacity': 1
        }, 400, function() {

            $(this).attr('class', 'right').removeAttr('style');
            $(this).nextAll().attr('class', 'inactive');
        });

        if (mode == 'left') 
        $('img:last' , $carousel).prependTo($carousel);
        if (mode == 'right') 
        $('img:first' , $carousel).appendTo($carousel);

    });
}
})(jQuery);​

---

你正在寻找这个： http ://web.enavu.com/demos/3dcarouselwip/

Answer 2

尝试这个：

Cloud Carousel - Javascript 中的 3d 轮播

它似乎完全符合您的要求