0

我正在尝试使用 javascript 在我的博客中添加一个视差滑块。

在我为实现这一目标而进行的研究中,我遇到了关于在博客中包含滑块的教程。我按照给出的过程使用教程实现了不同的滑块(Mary Lou 的视差滑块)。该 zip 文件包含三个 javascript 文件,但我在博客模板中仅引用了其中一个(将其上传到谷歌网站的页面上)。接下来我添加了css,将导航图像和背景图像上传到博客并提取了它们的链接,最后我添加了我在下面引用的html:

<div id="pxs_container" class="pxs_container">
<div class="pxs_bg">
    <div class="pxs_bg1"></div>
    <div class="pxs_bg2"></div>
    <div class="pxs_bg3"></div>
</div>
<div class="pxs_loading">Loading images...</div>
<div class="pxs_slider_wrapper">
    <ul class="pxs_slider">
        <li><img src="http://3.bp.blogspot.com/-ytZq9IQR2pA/Ucfbyp3gqII/AAAAAAAAACg/FrLRuE8lsGY/s1600/1.jpg" alt="First Image" /></li>
        <li><img src="http://1.bp.blogspot.com/-GOiswNwepaA/UcfbxPrx0yI/AAAAAAAAACY/orZUpjDa8_8/s1600/2.jpg" alt="Second Image" /></li>
        <li><img src="http://3.bp.blogspot.com/-tkqv4l0OW-o/UcfbvyPcA_I/AAAAAAAAACQ/SdsW2kEmRrE/s1600/3.jpg" alt="Third Image" /></li>
        <li><img src="http://2.bp.blogspot.com/-9sWga6Z1-b4/UcfbupMObgI/AAAAAAAAACI/NNH4v7GoWPs/s1600/4.jpg" alt="Fourth Image" /></li>
        <li><img src="http://3.bp.blogspot.com/-mQV4AV6cuxA/UcfbtqN14WI/AAAAAAAAACA/Jjn7RKmpDrs/s1600/5.jpg" alt="Fifth Image" /></li>
         <li><img src="http://1.bp.blogspot.com/-3Ldx-SSb8So/UcfbsuOUCyI/AAAAAAAAAB0/LiI3qwOi90Q/s1600/6.jpg" alt="Sixth Image" /></li>
                </ul>
    <div class="pxs_navigation">
        <span class="pxs_next"></span>
        <span class="pxs_prev"></span>
    </div>
    <ul class="pxs_thumbnails">
        <li><img src="http://3.bp.blogspot.com/-ytZq9IQR2pA/Ucfbyp3gqII/AAAAAAAAACg/FrLRuE8lsGY/s1600/1.jpg" alt="First Image" /></li>
        <li><img src="http://1.bp.blogspot.com/-GOiswNwepaA/UcfbxPrx0yI/AAAAAAAAACY/orZUpjDa8_8/s1600/2.jpg" alt="Second Image" /></li>
        <li><img src="http://3.bp.blogspot.com/-tkqv4l0OW-o/UcfbvyPcA_I/AAAAAAAAACQ/SdsW2kEmRrE/s1600/3.jpg" alt="Third Image" /></li>
        <li><img src="http://2.bp.blogspot.com/-9sWga6Z1-b4/UcfbupMObgI/AAAAAAAAACI/NNH4v7GoWPs/s1600/4.jpg" alt="Fourth Image" /></li>
        <li><img src="http://3.bp.blogspot.com/-mQV4AV6cuxA/UcfbtqN14WI/AAAAAAAAACA/Jjn7RKmpDrs/s1600/5.jpg" alt="Fifth Image" /></li>
        <li><img src="http://1.bp.blogspot.com/-3Ldx-SSb8So/UcfbsuOUCyI/AAAAAAAAAB0/LiI3qwOi90Q/s1600/6.jpg" alt="Sixth Image" /></li>

    </ul>
</div>

我期待几个图像和滑动效果,但它只是永远加载,如下面的屏幕截图所示

永远加载

可以在此处查看实时站点:http: //a-mouthful-of-recipes-about-us.blogspot.in/

我不确定我的 html 中遗漏了什么,我需要包含什么来确保图像和滑块出现?

4

0 回答 0