javascript - 具有多个可见图像的无限画廊

Question

我希望在他们的网站上创建如下所示的内容。

http://www.vogue.com/

显示多张图片的自动滚动幻灯片。 (1, 2, 3) 然后 (2, 3, 4)。它最终根据有多少循环遍历它们。每个图像也位于一个单独的 div 中，我相信叠加层是为两个未聚焦的外部图像放置的。

我不是很精通 javascript，无法自己从头开始创建这样的东西，而且还没有找到允许在给定时间看到多个图像的 jquery 幻灯片。我找到的最接近的是一次滚动浏览 3 张图像的插件，但不会自动滚动。

有谁知道如何使用给定的规范轻松完成此操作？我需要它来执行它在 vogue 网站上的表现。提前致谢。

Answer 1

jsBin demo

jQuery:

// infinite Gallery - script by roXon, design idea by "Vogue(R)"
$(function(){


    var c = 0;        // COUNTER // SET HERE DESIRED START SLIDE NUMBER (zero based)
    var speed = 300;    // ANIMATION SPEED
    var pause = 3500;   // ANIMATION PAUSE
    var $slider = $('.carousel-slider');
    var $sli = $slider.find('.carousel-content');
    var $btns = $('#btn-left, #btn-right');

    /* DO NOT EDIT BELOW */
    var sliN = $sli.length;
    $('.carousel').clone().appendTo( $('.carousel:gt(0)') ); /*CLONE SLIDERS*/
    var m = 0;
    var w = $slider.closest('div').width();
    var intv;
    $slider = $('.carousel-slider'); // all
    $slider.width(w*2);
    // rearrange
    $slider.eq(0).find('.carousel-content:lt('+(c)+')').appendTo( $slider.eq(0) );
    $slider.eq(1).find('.carousel-content:lt('+(c-1)+')').appendTo( $slider.eq(1) );
    $slider.eq(2).find('.carousel-content:gt('+(c)+')').prependTo(  $slider.eq(2) );

    // POPULATE WITH NAVIGATION BUTTONS
    for(i=0;i<sliN;i++){
        $('#nav-btns p').append(' <a href="#">'+ (i+1) +'</a> ');
    }

    // TOGGLE ACTIVE CLASS TO NAV BUTTON
    function navBtnsActive(){
        c = c===-1 ? sliN-1 : c%sliN ;  // counter resets
        $('#nav-btns a').removeClass('btn-active').eq(c).addClass('btn-active'); // nav buttons actives
    }
    navBtnsActive();

    var $lastCont;
    function anim(){
        if(c>m){ // right btn
            $slider.animate({left:-w}, speed, 'linear', function(){
                $(this).css({left:0}).find('.carousel-content:first').appendTo( $(this) );
            });
            m++;
        }else if(c<m){ // left btn  
            $slider.animate({left:-w},0,function(){
                $lastCont = $(this).find('.carousel-content:last');
                $(this).find('.carousel-content:last').prependTo( $(this) );
            }).animate({left:0}, speed, 'linear');
            m--;
        }
        if(c!=m){anim();} // loop until match
    }

    // LEFT-RIGHT BUTTONS //
    $btns.on('click',function(){
        if(!$slider.is(':animated')){
            var btnID = this.id=='btn-right' ? c++ : c-- ;
            anim();
            navBtnsActive();
            m=c;
        }
    });

    // NAV BUTTONS //
    $('#nav-btns a').on('click',function(e){
        e.preventDefault(); 
        c = $(this).index();
        anim(); 
        navBtnsActive();
    });

    // AUTO SLIDE
    function auto(){
        clearInterval(intv);
        intv = setInterval(function(){
            $('#btn-right').click();
        }, pause);
    }
    auto(); // start!

    // PAUSE ON HOVER //
    $('#gallery').on('mouseenter mouseleave',function( e ){
        var mEnt = e.type=='mouseenter',
            aSli = mEnt?clearInterval(intv):auto();
        $btns.stop().fadeTo(300,mEnt?1:0);
    });

});

HTML:

  <div id="document_wrapper">

    <div id="container">
      
        <h1 class="title">BLOGUE</h1>
        
        <div id="top-nav"></div>
        
        <div id="gallery"> <!-- OUR PRECIOUS :) -->

            <div class="carousel carousel-center">
                <div class="carousel-slider">
              
                    <div class="carousel-content">
                                         <!-- organize your content here -->
                    </div>
                    <!-- use more .carousel-content here -->
                
                </div>
            </div>
            
            <div class="carousel carousel-left"></div>
            <div class="carousel carousel-right"></div>
        
            <div id="btn-left"></div>
            <div id="btn-right"></div>
            
            <div id="nav-btns"><p></p></div>

        </div>
        
        
            <!-- document content here -->
      
    </div>
    
</div>

CSS:

*{margin:0;padding:0;} /* UGLY RESET */
body{
    font:14px/24px "Myriad Pro","Trebuchet MS",sans-serif;
    background:#F2EFED;
    color:#555;
}
#document_wrapper{
    position:relative;
    overflow:hidden;
}

h1.title{
    font-family:"Times New Roman",Times,serif;
    font-size:14.16em;
    line-height:0.6em;
    font-weight:normal;
    letter-spacing:10px;
    color:#000;
    position:relative;
    z-index:1;
    top:70px;
}


#container{
    position:relative;
    margin:0px auto;
    width:980px;
    padding-bottom:70px;
    height:1000px;
    background:#fff;
}
#top-nav{
    border-top:1px solid #000;
    position:relative;
    z-index:2;
    background:#fff;
    height:36px;
    width:100%;
}



/* GALLERY */

#gallery{
    height:400px;
    width:100%;
    position:relative;
    left:0px;
    padding-bottom:36px; /* FOR NAV BUTTONS HEIGHT */
}
.carousel{
    background:#147;
    position:absolute;
    margin-left:-10px;
    width:850px;
    height:400px;
    border-left:10px solid #fff;
    border-right:10px solid #fff;
    overflow:hidden;
}
.carousel-left, .carousel-right{
  opacity:0.2;
}
.carousel-left{
    left:-860px;
}
.carousel-right{
    left:860px;
}
.carousel-slider{
    height:400px;
    position:absolute;
    left:0;
}
.carousel-content{
    position:relative;
    margin-left:-10px;
    float:left;
    width:850px;
    height:400px;
    border-left:10px solid #fff;
    border-right:10px solid #fff;
}
/* BUTTONS */
#btn-left, #btn-right{
    position:absolute;
    background:#fff;
    width:25px;
    height:150px;
    top:125px;
    display:none;
    cursor:pointer;
}
#btn-right{
    right:130px;
}
/**/
#nav-btns{
    position:relative;
    top:400px;
    height:30px;
    width:850px;
}
#nav-btns{
    text-align:right;
}
#nav-btns a{
    font-style:italic;
    text-decoration:none;
    color:#888;
    padding:0 8px;
    margin:0 !important;
}
#nav-btns a.btn-active{
    border-top:10px solid #fff;
    text-decoration:none;
    color:#000;
}
#nav-btns a:hover{
    color:#000;
}