0

我正在使用 AnythingSlider 将内容放置在此开发人员的新站点上：

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

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

有什么我设置错了吗？我认为它可能在全球某个地方，比如anythingSlider.js（或者可能是.css——尽管这似乎不太可能），但没有看到任何突出的东西。

4

2 回答 2

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'});
    ...
于 2012-11-21T00:49:48.613 回答
0

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;}
于 2013-01-25T18:12:10.667 回答