过去几天我一直试图找到解决问题的方法,但实际上无法在任何地方找到它,而谷歌真的很讨厌我,所以我在这里。这是一个很大的要求,我的良心正在吃我的问题,但我不知道还有什么地方可以转。
我正在为摄影师建立一个画廊,虽然我对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%;
}
答案 0 :(得分: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,如果你想让它变得有限,
只计算幻灯片的长度,并停止添加幻灯片,我添加了评论..
我刚才指出了......
我希望这会有所帮助......