javascript - Easyslider 1.7 帮助 - 页面加载时显示的所有内容

Question

在我的页面上使用 jQuery 实现 Easy Slider 1.7 时，我发现当页面首次加载时，ul滑块中的两个图像都会显示，然后滑块正确加载，并且只显示第一张幻灯片。

纠正此问题的最佳方法是什么，以便div在脚本正确加载之前不显示滑块？我正在使用此代码来运行它：

$(document).ready(function(){   
    $("#slider").easySlider({
        auto: true,
        continuous: true,
        pause: 10000
    });
});

score 3 · Accepted Answer

您可以通过 CSS 隐藏内容，如下所示：

#slider { display: none; }

然后在页面加载时也显示它：

$(document).ready(function(){
  $("#slider").show().easySlider({ auto: true, continuous: true, pause: 10000 });
});

为了安全起见，我会在页面中为非 JS 用户添加一个块，如果你有很多这些，可以是里面的样式表，否则只是一个样式标签：

<noscript><style type="text/css">#slider { display: block; }</style></noscript>

score 0 · Accepted Answer

我将下面的代码添加到我的 css 中以隐藏图像不被堆叠。

/*Added to hide stacking of images on IE 7/8*/
#slider{
  height:227px;
  overflow:hidden;
}

2 回答 2