幻灯片.js jQuery插件在Chrome或Safari中无法正确加载，但在Firefox中很好

Slides.js jQuery plugin not loading right in Chrome or Safari but fine in Firefox

本文关键字：加载 但在 很好 Firefox 插件 jQuery Chrome 幻灯片 Safari js      更新时间：2023-09-26

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

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

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

这是我的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
        }); 
});

我看了一下你的标记，看起来你忘记了一些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设置幻灯片。

来源：幻灯片.com

相关文章：