nivoSlider 未定义资源

Question

我正在尝试让 nivoSlider 在此站点 http://fritech.co.uk/ 上工作，其中包含三个图像

<div id="slideshow" class="section theme-nivo">
    <div class="ribbon"></div>
    <div class="nivoSlider">
        <img src="static/img/logos.png" alt="Our inhouse skills" />
        <img src="static/img/atlanta.png" alt="Modern technologies" />
        <img src="static/img/boston.png" alt="Ruggedly tested software" />
    </div>
</div>

但是 nivoSlider 只显示其中之一，始终显示在顶部。我不确定这里出了什么问题。任何帮助将不胜感激。

Answer 1

有关您的情况的文档，

我刚遇到类似的情况，“k is not defined”..

恰好是img 标记中缺少title 属性

<img title="" src="http://placehold.it/260x180" alt="Our inhouse skills" />

Answer 2

找到了！

请改一下

<div id="slideshow" class="section theme-nivo">
    <div class="ribbon"></div>
    <div class="nivoSlider">
        <img src="static/img/logos.png" alt="Our inhouse skills" />
        <img src="static/img/atlanta.png" alt="Modern technologies" />
        <img src="static/img/boston.png" alt="Ruggedly tested software" />
    </div>
</div>

到这里：

<div class="section theme-nivo">
    <div class="ribbon"></div>
    <div id="slideshow" class="nivoSlider">
        <img src="static/img/logos.png" alt="Our inhouse skills" />
        <img src="static/img/atlanta.png" alt="Modern technologies" />
        <img src="static/img/boston.png" alt="Ruggedly tested software" />
    </div>
</div>  

NivoSlider 期望顶部元素的所有子元素都是图像，如果元素不是图像，它将查找它可以在该元素中找到的第一个图像。 （见这里）

• https://github.com/gilbitron/Nivo-Slider/blob/master/jquery.nivo.slider.js#L44

这就是为什么您会得到一个未定义图像和徽标图像的循环。 因为ribbon元素不包含任何图片，而nivoSlider元素的第一张图片就是logo。

Answer 3

您的问题是您将 #slideshow id 添加到 html 中的错误容器中：

<div id="top" class="bordered-section">
    <div id="slideshow" class="section theme-nivo">
        <div class="ribbon"></div>
        <div class="nivoSlider">

            <img src="http://placehold.it/260x180" alt="Our inhouse skills" />
            <img src="http://placehold.it/260x180" alt="Modern technologies" />
            <img src="http://placehold.it/260x180" alt="Ruggedly tested software" />
        </div>
    </div>
</div>

ID 应放置在用作背景图像的图像容器上。

固定。

<div id="top" class="bordered-section">
    <div class="section theme-nivo">
        <div class="ribbon"></div>
        <div id="slideshow" class="nivoSlider">

            <img src="http://placehold.it/260x180" alt="Our inhouse skills" />
            <img src="http://placehold.it/260x180" alt="Modern technologies" />
            <img src="http://placehold.it/260x180" alt="Ruggedly tested software" />
        </div>
    </div>
</div>

你可以在插件Documentation下找到正确的用法。

Answer 4

我有同样的问题尝试将您的 js 更改为此 http://pastebin.com/7QPV2rgr

Answer 5

出了点问题，也许您正在请求服务器或该文件夹中不存在的图像。因为在 Firefox 控制台 (FireBug) 它抛出了这个 error

未定义 "NetworkError: 404 Not Found - http://fritech.co.uk/undefined"

否则一切看起来都很好。请仔细检查您尝试在滑块中加载的图像。

希望这会有所帮助。