Javascript 如何隐藏图像

下面是JSFIDLE，请查看完整代码

为什么最后一张图片会在下面折叠，而不是像应该的那样隐藏？我正在尝试创建一个滑块。我想这可能是滑块不工作的原因

HTML JavaScript

$（窗口）.load（函数（）{
$（“.gallery\uu link”）.fancybox({
“标题秀”：假，
“transitionIn”：“弹性”，
“transitionOut”：“弹性”
});
var totalWidth=0；
$（“.gallery\u item”）。每个（函数（）{
totalWidth=totalWidth+$（此）.outerWidth（真）；
});
var maxScrollPosition=totalWidth-$（“.gallery wrap”）.outerWidth（）；
函数到alleryItem（$targetItem）{
如果（$targetItem.length）{
var newPosition=$targetItem.position（）.left；
如果（新位置很少修正和添加：

.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;
}

如果我删除你的fancybox，似乎效果不错（因为脚本不包括在内）并添加jquery:。您的控制台中有任何错误吗？如果您正在查找为什么它不能在Fiddle上工作，那么答案是FancyBoxPlugin@Pete是的，它是有效的，但是为什么Fancybox把它搞砸了？关于空格，你的意思是我应该缩小HTML代码吗？？？@tacocate只是把Fancybox放在
的末尾。加载
方法并对javascript进行一些修复，更好地模块化您的代码。例如：fancybox会把您的工作搞得一团糟，因为您没有包含fancybox js，所以它不知道它是什么-我删除了它，因为不必查看您的其余代码是否正常工作（它是这样的）。您的本地版本中一定有错误（在chrome中按f12并单击console选项卡）。下面的空白注释适用于如果您使用内联块元素而不是浮动块元素，如果您这样做，您将不得不重新计算滚动的宽度或注释掉元素之间的空白，如果您坚持使用代码和样式，那么您就不必爱您。如果您是另一个person您可能使用float:left，但您比这更好！感谢您向我们展示此代码。不要忘记，如果您这样做，那么您需要注释掉
.gallery\uu item
元素之间的空白，否则您将获得元素之间的额外边距，滑块必须通过添加您的co来解释HI@Era更正我找不到上一个和下一个控件工作。你能看一下吗？你在工作吗。。？
.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;
}

$(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);
    });
});

.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;
}