Slides.js jQuery 插件无法在 Chrome 或 Safari 中正确加载，但在 Firefox 中正常

Question

我正在使用这个插件：http://slidesjs.com/

当我在 Firefox 中加载我的网站：http://26splitrockcove.com/ 时，此幻灯片会加载并正常运行。但是，当我在 Chrome 或 Safari 中加载此网站时，它什么也不显示，甚至不显示预加载图像，但是它很快就会显示幻灯片，但是它总是等到幻灯片中的最后一个（或第三个）图像，然后当它过渡过渡不是应有的样子。

现在，真正奇怪的是，这仅在您使用重新加载按钮重新加载页面时才会发生，但是如果您在 Safari 和 Chrome 中单击 url 并按 Enter 键 - 它可以完美运行。

这是我的 javascript：

$(function(){
        $('.home .slides').slides({
            preload: true,
            preloadImage: 'assets/loading.gif',
            autoHeight: true, //before I used this, it didn't even show the third image at all
            play: 5000,
            slideSpeed: 1000,
            effect: 'slide',
            pagination: false,
            generatePagination: false,
            pause: 150,
            hoverPause: true
        }); 

});

Answer 1

我查看了您的标记，您似乎忘记了一些 div/类。

您的代码：

<div class="slides">
    <div class="slideshow">
        <img src="photos/510ad67ebdf9c_thumb.jpg"/>
        <img src="photos/510ad71697e59_thumb.jpg"/>
        <img src="photos/510ad697b3734_thumb.jpg"/>
    </div>
</div>

你应该拥有的：

<div class="slides">
    <div class="slides_container">
        <div>
            <img src="photos/510ad67ebdf9c_thumb.jpg"/>
        </div>
        <div>
            <img src="photos/510ad71697e59_thumb.jpg"/>
        </div>
        <div>
            <img src="photos/510ad697b3734_thumb.jpg"/>
        </div>
    </div>
</div>

幻灯片 js javascript 查找“slides_container”div，然后根据它包含的 div 设置幻灯片。

来源：slidesjs.com