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

Question

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

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

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

Answer 1

您可以通过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>

Answer 2

我将下面的代码添加到我的CSS中，以隐藏图像被堆叠起来。

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