Question

最近，我一直在尝试创建一个全宽jQuery滑块，它基本上会显示一个非常大的图像（2000x350），这样可以让图像跨越甚至非常大的显示器分辨率。

然而，与Parallax和this jQuery Cycle example等类似的滑块不同，我想使用整个图像而不是具有背景颜色的较小图像。我遇到的问题是如何在较小的分辨率（1024x768）上显示滑块，因为它使用滚动条显示整个图像，当我试图完成它只是显示图像的“中心”而忽略了页面上没有显示的区域。

我正在附加一张带有示例图片的jsfiddle（2000x350），我想知道如果在1024x768上查看该页面，我怎么能只显示“960”内的区域，并显示更大的部分如果分辨率较大，则为图像（居中）。

任何建议 - 无论是纯CSS还是使用Javascript / JQuery都将非常感激。

摘要：我正在尝试创建一个全宽jQuery图像滑块，它只显示图像的“中心”，并根据用户的窗口大小忽略任何溢出。 < / p>

编辑： This example - 正是我要搜索的内容。

Answer 1

如果你的HTML如下：

<div id='wrapper'>
    <img src="http://i.imgur.com/s0Gvf.png" />
</div>

然后，您可以使用以下CSS在#wrapper元素中垂直和水平居中图像：

html, body { 
    height:100%; 
}
#wrapper {
    position:relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#wrapper img {   
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-1000px;
    margin-top:-175px;
}

这会将#wrapper设置为浏览器窗口的宽度和高度。 overflow:hidden;会使隐藏在其中的任何内容变得太大。 #wrapper img将图像设置为垂直和水平对齐父容器。

这是通过将top和left位置设置为50%，然后使用图像宽度和高度的一半来偏移这些位置来完成的。所以margin-left是- (image_width/2) px等等。

修改

关于图库/滑块，请查看您的jsFiddle的更新版本：http://jsfiddle.net/vMqxa/2/

要查看最终结果，请访问此页面：http://jsfiddle.net/vMqxa/2/show/light/

这里到底发生了什么......

开始时有#wrapper_wrapper（名字不好，我知道..）这是一个100％的宽度和高度div，所以它会填满整个屏幕。

其中#wrapper将包含所有图像。这将是左右滚动以显示正确的图像，因此它需要与其中的所有图像一样宽。这意味着如果我们有4个图像，那么#wrapper的宽度将是屏幕宽度的4 *。这是使用javascript在javascript中计算的：

$("#wrapper").width(window.innerWidth * $(".image_wrapper").length);

接下来有.image_wrapper，它是用于存放每个图像的div。使用javascript将此宽度设置为window.innerWidth。它也有overflow:hidden，因此它内部的任何东西都太大了，不会显示出来。

最后，我们使用.image_wrapper img定位来定位图片absolute。它们被设置为left:50%; top:50%;，然后使用javascript我们计算完美居中它们所需的偏移量。这完成了：

$(".image_wrapper img").each(function(){ $(this).css({ marginLeft: "-" + $(this).width()/2 + "px", marginTop: "-" + $(this).height()/2 + "px" }); });

这一切都放在一个在页面加载时调用的函数中，也在窗口调整大小时调用。

要向左和向右滚动，我们使用：

$("#next").click(function(){ var currentMargin = parseInt($(".image_wrapper").eq(0).css("marginLeft").replace("px","")), newMargin = currentMargin - window.innerWidth; $(".image_wrapper").eq(0).animate({ marginLeft: newMargin + "px" }); }); $("#prev").click(function(){ var currentMargin = parseInt($(".image_wrapper").eq(0).css("marginLeft").replace("px","")), newMargin = currentMargin + window.innerWidth; $(".image_wrapper").eq(0).animate({ marginLeft: newMargin + "px" }); });

注意：如果左侧或右侧没有任何内容，则不会停止滚动。

再次，请查看jsFiddle上的完整代码：http://jsfiddle.net/vMqxa/2/

Answer 2

我无法让你的jsFiddle显示任何东西，只需粘贴一些示例代码。它基本上是具有/ height的特定的div，并且在其中显示图像，其中图像居中并且图像的溢出被隐藏（因为图像大于div）。

var width = ( $("#theimg").width() - $(".box").width() ) / 2;
var height = ( $("#theimg").height() - $(".box").height() ) / 2;

$("#theimg").css( "top", "-" + height + "px" );
$("#theimg").css( "left", "-" + width + "px" );


.box { position: relative; overflow: hidden; width:500px; height: 200px; }
#theimg { position: absolute; top: 0px; left: 0px; }

<body>
  <div class="box">
    <img id="theimg" src="cliffs.jpg" />
  </div>
</body>

如果您不想修复，可以将.box元素设置为屏幕大小。计算和居中应该仍然相同

开发全宽jQuery图像滑块

2 个答案: