在过去的几天里，我一直在试图找到解决我的问题的方法，但真的无法在任何地方找到它，而且谷歌真的很讨厌我，所以我来了。这是一个很大的要求，我的良心正在吞噬我的要求，但我不知道还能去哪里。
我正在为一名摄影师建立一个画廊，虽然我对 HTML 和 CSS 很自在，但我的 jQuery 技能却受到了打击（简而言之，它们并不好）——惊喜，惊喜。
任务变得更加复杂，因为它是一种 100% 高度的画廊，而 100% 高度并不适合。我设法设置了一些，但它的功能确实受损。
在 Stack 和 Google 上挖掘之后，我发现了 William Moynihan 的这个很棒的插件/小提琴：http: //jsfiddle.net/wdm954/8GKz6/11/
它完全包含我的标记和 CSS以及我正在寻找的功能：滑动时使主图像居中的滑块，并且是无限的。
height: 100%;但是，由于width: auto;图像上的属性，它不能很好地发挥作用。以下行：
$(content).width(w * $(section).length);
由于 CSS 中的 auto 属性，似乎根本不计算容器的宽度（将其设置为零）。当我通过 jQuery .css 属性将宽度设置为 时('width', 'auto')，它工作正常，但滑动功能不完善，导致图像在左右移动时跳过/跳跃。
我没有使用滑块，因为这是一种以水平方式实际布局内容的好方法，这在摄影师的网站上看起来很棒。并且拥有width: 100%;将使垂直图像延伸到浏览器窗口之外，而水平图像“悬挂”在顶部，下方有大量空白空间。width: auto;所以，我相信这height: 100%是正确的、反应迅速的方式，但如果有人设法“说服”我，我一定会跟随你的领导。
当我在这里时，也许有人足够有礼貌地指出我正确的方向以使这个画廊有限 - 在滑块的开始和结束处结束，左/右按钮相应地消失。
任何帮助是极大的赞赏。这是代码本身，以防万一小提琴还不够：
<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"><<</a>
<a href="#" class="right">>></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%;
}