Question

我已经购买了主题森林模板，该模板用于创建网站。我要包括的功能之一，特别是在网站的about.html页面上，是一个无限滚动的轮播，用于在其上显示客户端徽标。我找到了一个我想使用here的轮播的很好的例子，并按照说明进行操作。

我在about.html页面的正文中添加了以下HTML代码：

    <div class="container">
  <section class="customer-logos slider">
    <div class="slide"><img src="images/about/amazon.png"></div>
    <div class="slide"><img src="images/about/bbc.png"></div>
    <div class="slide"><img src="images/about/bbc2.png"></div>
    <div class="slide"><img src="images/about/bbcnews.jpg"></div>
    <div class="slide"><img src="images/about/bbcwales.png"></div>
    <div class="slide"><img src="images/about/itv.png"></div>
    <div class="slide"><img src="images/about/kewgardens.png"></div>
    <div class="slide"><img src="images/about/rada.jpg></div>
  </section>
</div>

我下载了CSS文件，并将其包含在其他CSS似乎位于的index.html和about.html中：

<link rel="stylesheet" href="stylesheets/bootstrap.css">
    <link rel="stylesheet" href="stylesheets/elements.css">
    <link rel="stylesheet" href="stylesheets/sinister.css">
    <link rel="stylesheet" href="stylesheets/slimmenu.css">
    <link rel="stylesheet" href="stylesheets/main.css">
    <link rel="stylesheet" href="stylesheets/main-bg.css">
    <link rel="stylesheet" href="stylesheets/main-responsive.css">
    <link rel="stylesheet" href="stylesheets/infinite-slider.css">

我将JavaScript代码添加到了名为carousel.js的文件中，并确保在我的about.html页面上引用了js文件：

<script src="javascripts/libs/common.js"></script>
    <script src="javascripts/libs/bootstrap.min.js"></script>
    <script src="javascripts/custom/main.js"></script>
    <script src="javascripts/custom/elements.js"></script>
    <script src="javascripts/custom/carousel.js"></script>

然后我将以下内容添加到我的轮播所在的网页上（about.html）：

<script src="javascripts/libs/common.js"></script>
    <script src="javascripts/libs/bootstrap.min.js"></script>
    <script src="javascripts/custom/main.js"></script>
    <script src="javascripts/custom/elements.js"></script>
    <script src="javascripts/custom/carousel.js"></script>
    <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

现在您可以看到here，最终我的About页面根本没有加载。当我第一次在本地计算机上尝试此操作时，没有通过FTP上传文件，网页（about.html）正常工作，但是徽标是水平显示的，并且没有滚动。

我通常可以掌握一些基础知识，但是我显然缺少一些东西，或者也许我试图实现的代码与模板有某种冲突？

Answer 1

这是因为您在common.js文件中得到了Uncaught TypeError: jQuery.easing[jQuery.easing.def] is not a function。 javaScript编译器因错误而停止执行（这是加载程序继续加载的原因），您可以通过按f12-> console看到相同的内容。这是有关如何解决此问题的更多信息。

转到javaScript/libs/common.js并搜索jQuery.easing[jQuery.easing.def]并解决错误。

为什么我的无限轮播代码破坏了我的网页？

1 个答案: