Question

我正在使用AnythingSlider为新网站上的内容添加内容：

http://sitedev.lcadfiles.com/interactive_barrett.html

当滑块首次加载到给定页面时，会有轻微的跳跃（整个滑块，箭头等移动几个像素，然后才会进入正确的位置）。登陆后，一切似乎都能正常工作。这种转变似乎不是浏览器特定的，因为它出现在我的旧机器和新机器上，有4种不同的浏览器（以及各种浏览器版本）。

我有什么问题吗？我认为它可能是全局的，比如anythingSlider.js（或者也许是.css - 虽然这似乎不太可能），但没有看到任何突出的东西。

Answer 1

有同样的问题。快速解决方法（适用于我）。

例如。你有像下面这样的HTML代码，添加一个style =“visibility：hidden;”到你的anythingslider容器。

<div id="slider_nest" style="visibility:hidden;">
    <ul id="your_anythingslider">
    ...
    </ul>
</div>

在js代码中，在文档准备好后将样式更改为可见。例如（JQuery的）

jQuery(document).ready(function($) {
    $('#slider_nest').css('visibility', 'visible');
    ...
    $('#your_anythingslider').anythingslider();
    ...
}

希望它有所帮助！

更新：使用加载程序gif添加滑块蒙版。

例如。在html中，您将拥有如下内容：

<div id="slider_mask" style="background: #000 url('ajax-loader.gif') no-repeat center;     display:block; height:568px; width:1050px; margin:0 auto;">
</div>
<div id="slider_nest" style="display:none; height:568px; width:1050px; margin:0 auto;">
    <ul id="your_anythingslider">
    ...
    </ul>
</div>

现在在js（JQuery）中：

jQuery(document).ready(function($) {
    $('#slider_mask').hide();
    $('#slider_nest').css({'display':'block'});
    ...

Answer 2

OMG，这终于解决了我们的问题！谢谢。

由于我在自定义主题上使用Wordpress插件，我不得不调整它有点像这样：

在 header.php 文件中的短代码之前添加：

<div id="slider_mask" style="background: #FFF url('ajax-loader.gif') no-repeat center;display:block; height:323px; width:940px; margin:0 auto;">
</div>

在 header.php 文件

部分添加此内容

<script type="text/javascript"> 
    $(document).ready(function(){
    $('#slider_mask').hide();           
    $('.anythingSlider').css({'display':'block'});
}

将其添加到 CSS 文件中：

.anythingSlider {display:none;}

整个滑块在加载时跳转 - AnythingSlider

2 个答案: