javascript - 如何隐藏图像

Question

这是 JSfiddle http://jsfiddle.net/zfxrxzLg/查看完整代码

为什么最后一张图片塌陷在下面，没有按应有的方式隐藏？我正在尝试创建一个 slider 。我在想这可能是 slider 不工作的原因。

HTML

<div class="gallery-wrap">
  <div class="gallery clearfix">


     <div class="gallery__item">
          <img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
     </div>
     <div class="gallery__item">
      <img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
     </div>

     <div class="gallery__item">
      <img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
     </div>

    <div class="gallery__item">
      <img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
    </div>

    <div class="gallery__item">
      <img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
    </div>

CSS

.gallery-wrap { 

    margin: 0 auto;
    overflow: hidden;
    width: 432px;
}
.gallery { 
    position: relative;
    left: 0; 
    top: 0; 
}
.gallery__item { 
    float: left; 
    list-style: none;
    margin-right: 20px;
}
.gallery__img { 
    display: block;
    border: 4px solid #40331b;
    height: 80px; 
    width: 80px; }

.gallery__controls { margin-top: 10px; }
.gallery__controls-prev { cursor: pointer; float: left; }
.gallery__controls-next { cursor: pointer; float: right; }

.clearfix:after{
    content: '.';
    clear: both;
    display:block;
    height: 0;
    visibility: hidden;
}

JavaScript

$(window).load(function(){
    $(".gallery__link").fancybox({
        'titleShow'     : false,
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic'
    });
    var totalWidth = 0;

    $(".gallery__item").each(function(){
        totalWidth = totalWidth + $(this).outerWidth(true);
    });

    var maxScrollPosition = totalWidth - $(".gallery-wrap").outerWidth();

    function toGalleryItem($targetItem){
        if($targetItem.length){
            var newPosition = $targetItem.position().left;
            if(newPosition <= maxScrollPosition){


                $targetItem.addClass("gallery__item--active");


                $targetItem.siblings().removeClass("gallery__item--active");
              $(".gallery").animate({
                    left : - newPosition
                });
            } else {

                $(".gallery").animate({
                    left : - maxScrollPosition
                });
            };
        };
    };

       $(".gallery").width(totalWidth);
    $(".gallery__item:first").addClass("gallery__item--active");


    $(".gallery__controls-prev").click(function(){
        var $targetItem = $(".gallery__item--active").prev();
        toGalleryItem($targetItem);
    });


    $(".gallery__controls-next").click(function(){
        var $targetItem = $(".gallery__item--active").next();
        toGalleryItem($targetItem);
    });
});

Answer 1

一些更正和补充:

.gallery__item {
    display: inline-block;
    list-style: outside none none;
    margin-right: 20px;
}

.gallery {
    left: 0;
    overflow: hidden;
    position: relative;
    top: 0;
    white-space: nowrap;
}