全屏滑块中的 jQuery 中心内容答案

【问题标题】：jQuery centre content in full screen slider全屏滑块中的 jQuery 中心内容
【发布时间】：2014-04-22 16:59:54
【问题描述】：

我正在使用 Supersized 全屏 jQuery 滑块插件。我正在尝试将每张幻灯片上的内容居中，并在调整窗口大小时将其保留在那里。问题是它保持加载偏移，然后当我稍微调整窗口大小时，它会跳转到正确的位置。我尝试了很多不同的代码，但似乎无法让每张幻灯片都能正常工作。

一些示例图片：

第一张幻灯片正确加载：http://i.imgur.com/GEaFPHu.png

第二张幻灯片偏移（直到窗口调整大小）：http://i.imgur.com/3CRJXNf.png

JavaScript 居中代码：

jQuery.fn.centerslide = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                            $(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                            $(window).scrollLeft()) + "px");
return this;
}

$(document).ready(function () {
$('.container').centerslide();
$(window).resize(function(){$('.container').centerslide()});
});

HTML 代码：

  <div id="slides">
<ul class="slides-container">
    <li id="slide1">    
        <img src="image1.jpg" alt="">
        <div class="container">
            <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
            <p>Praesent quis elementum mi. Nam vel mattis ligula. Donec vehicula tristique diam et laoreet. Phasellus ornare, lorem quis fringilla mollis, velit eros accumsan dolor, sit amet pellentesque sem lorem sed sapien.</p>
        </div>
    </li>

    <li id="slide2">
        <img src="image2.jpg" alt="">
        <div class="container">
            <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
            <p>Praesent quis elementum mi. Nam vel mattis ligula. Donec vehicula tristique diam et laoreet. Phasellus ornare, lorem quis fringilla mollis, velit eros accumsan dolor, sit amet pellentesque sem lorem sed sapien.Praesent quis elementum mi. Nam vel mattis ligula. Donec vehicula tristique diam et laoreet. Phasellus ornare, lorem quis fringilla mollis, velit eros accumsan dolor, sit amet pellentesque sem lorem sed sapien.Praesent quis elementum mi. Nam vel mattis ligula. Donec vehicula tristique diam et laoreet. Phasellus ornare, lorem quis fringilla mollis, velit eros accumsan dolor, sit amet pellentesque sem lorem sed sapien.</p>
        </div>
    </li>

</ul>

<nav class="slides-navigation">
  <a href="#" class="next"></a>
  <a href="#" class="prev"></a>
</nav>

希望我提供了足够的信息。非常感谢任何帮助！谢谢。

【问题讨论】：

标签： javascript jquery slider center supersized

【解决方案1】：

在我这边，我开发了一个小功能来居中 div ：

function center_div(mon_div)
{
    $('#' + mon_div).css('left', Math.max(0, (($(window).width() - $('#' + mon_div).outerWidth()) / 2) +  $(window).scrollLeft()) + 'px');
    $(window).resize(function(){
        $('#' + mon_div).css('left', Math.max(0, (($(window).width() - $('#' + mon_div).outerWidth()) / 2) +  $(window).scrollLeft()) + 'px');
    });
}

【讨论】：