Question

我正在使用 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>

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

Answer 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');
    });
}

全屏滑块中的jQuery中心内容

1 个答案: