javascript - 带有 jQ​​uery : 100% height, 图像/子项自动宽度的水平 slider

Question

在过去的几天里，我一直在努力寻找解决我的问题的方法，但真的找不到任何地方，谷歌真的很讨厌我，所以我来了。这是一个很大的要求，我的良心在责备我，但我不知道还能去哪里求助。

我正在为一位摄影师构建一个画廊，虽然我对 HTML 和 CSS 很自在，但我的 jQuery 技能正在遭受打击(简而言之，它们并不好)- 惊喜，惊喜。

任务变得更加复杂，因为它是一个 100% 高度的画廊，而 100% 的高度并不适合。我设法设置了其中的一些，但它的功能确实受损了。

在 Stack 和 Google 上挖掘之后，我发现了 William Moynihan 的这个很棒的插件/ fiddle : http://jsfiddle.net/wdm954/8GKz6/11/

它包含完全符合我的标记和 CSS，以及我一直在寻找的功能:滑动时使主图像居中且无限的 slider 。

但是，由于图像上的 width: auto; 属性，它不能很好地与 height: 100%; 一起播放。下面一行:

$(content).width(w * $(section).length);

由于 CSS 中的自动属性，似乎根本不计算容器的宽度(将其设置为零)。当我通过 jQuery .css 属性将宽度设置为 ('width', 'auto') 时，它工作正常，但滑动功能不完善，导致图像在向右移动时跳过/跳跃，离开了。

我没有求助于 slider ，因为这是一种以水平方式实际布置内容的好方法，这在摄影师的网站上看起来很棒。 width: 100%; 将使垂直图像延伸到浏览器窗口之外，水平图像“悬挂”在顶部，下方有大量空白。所以，我确信 width: auto; 和 height: 100% 是正确的响应方式，但如果有人设法“说服”我，我一定会听从你的领导。

当我在这里时，也许有人可以足够礼貌地为我指出正确的方向，使这个画廊有限 - 在 slider 的开始和结束处结束，左/右按钮相应地消失。

非常感谢任何帮助。这是代码本身，以防 fiddle 不够用:

<div class="container">
    <div class="gallery">
        <img src="../img/1.jpg" alt="Image" />
        <img src="../img/2.jpg" alt="Image" />
        <img src="../img/3.jpg" alt="Image" />
        <img src="../img/4.jpg" alt="Image" />
        <img src="../img/5.jpg" alt="Image" />
    </div>
</div>
<nav id="navigation">
    <a href="#" class="left">&#060;&#060;</a>
    <a href="#" class="right">&#062;&#062;</a>
</nav>

<script>
/*  jQuery Ghost Carousel
 *  Copyright (c) 2011 William Moynihan
 *  http://ghosttype.com
 *  Licensed under MIT
 *  http://www.opensource.org/licenses/mit-license.php
 *  May 31, 2011 -- v1.0
 */
$(function() {
    var content = '.container .gallery';
    var section = content + ' > img';

    function ghostCarousel() {

        var v = $(window).width();
        var w = $(section).width();
        var c = (w * $(section).length - v) / 2;

        $(content).width(w * $(section).length);
        $(content).css('margin-left', -c);
        $(content).css('width','auto');

        $('#navigation a.left').click(function(e) {
            e.preventDefault();
            if ($(content).is(':animated')) return false;
            $(content).animate({ marginLeft: '-=' +w }, 1000, function() {
                var first = $(section).eq(0);
                $(section).eq(0).remove();
                $(this).animate({ marginLeft: '+=' +w }, 0);
                $(this).append(first);
            });
        });
        $('#navigation a.right').click(function(e) {
            e.preventDefault();
            if ($(content).is(':animated')) return false;
            $(content).animate({ marginLeft: '+=' +w }, 1000, function() {
                var end = $(section).length - 1;
                var last = $(section).eq(end);
                $(section).eq(end).remove();
                $(this).animate({ marginLeft: '-=' +w }, 0);
                $(this).prepend(last);
            });
        });

    }

    ghostCarousel();

    $(window).resize(function() {
        var v = $(window).width();
        var w = $(section).width();
        var c = (w * $(section).length - v) / 2;
        $(content).css('margin-left', -c);
    });   
});
/* end "jQuery Ghost Carousel" */
</script>

连同 CSS:

html, body { padding: 0px; }

.container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;   
}
.container .gallery > img {
    position: relative;
    float: left;
    height: 100%;
}

Answer 1

要使其成为有限的，你只需要理解和修改这两个函数，

        $('#gcNav a.left').click(function(e) {
            e.preventDefault();
            if ($(content).is(':animated')) return false;
            $(content).animate({ marginLeft: '-=' +w }, 1000, function() {
                var first = $(section).eq(0);//this is first
                $(section).eq(0).remove();
                $(this).animate({ marginLeft: '+=' +w }, 0);
                $(this).append(first);//adding
            });
        });
        $('#gcNav a.right').click(function(e) {
            e.preventDefault();
            if ($(content).is(':animated')) return false;
            $(content).animate({ marginLeft: '+=' +w }, 1000, function() {
                var end = $(section).length - 1;
                var last = $(section).eq(end);//this is last
                $(section).eq(end).remove();
                $(this).animate({ marginLeft: '-=' +w }, 0);
                $(this).prepend(last);//adding
            });
        });

现在，在这段代码中，如果你想让它成为有限的，它正在点击 .left 和 .right，

只是计算幻灯片的长度，停止添加幻灯片，我已经添加了评论..

我刚刚指出了方法...

我希望这会有所帮助...