Question

我在使用carouFredSel jQUERY插件时遇到了一些麻烦。我得到了所有样式并在本地工作得很好（没有MAMP），但是当我将文件移动到我的实时服务器并确保一切都在正确的地方时它就破了。

我可以在本地使用相同的文件，并且轮播可以正常工作。我开始认为它与我的代码有关，或者我是如何解决它的。我不是很精通Javascript（我可以使用 jQUERY），所以这对我来说是一个学习过程。非常感谢任何帮助。

这是我的标题代码，我正在使用HTML 5 Boilerplate。

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Site Title</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <!-- LOAD JQUERY -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>

    <!-- GOOGLE WEB FONTS -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,700,600,300,800' rel='stylesheet' type='text/css'>

            <!-- CSS -->
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/carousel.css" />

    <!-- MODERNIZER -->
    <script src="js/vendor/modernizr-2.6.2.min.js"></script>

    <!-- JAVASCRIPT -->
    <!-- CAROUSEL & jQUERY UI -->
            <script type="text/javascript" src="js/jquery.ui.core.min.js"></script>
            <script type="text/javascript" src="js/jquery.ui.widget.min.js"></script>

            <!-- CAROUSEL -->
            <script type="text/javascript" language="javascript" src="js/jquery.carouFredSel-6.1.0.js"></script>

            <!-- optional include helper plugins -->
            <script type="text/javascript" language="javascript" src="js/jquery.mousewheel.min.js"></script>
            <script type="text/javascript" language="javascript" src="js/jquery.touchSwipe.min.js"></script>
            <script type="text/javascript" language="javascript" src="js/jquery.ba-throttle-debounce.min.js"></script>

            <script type="text/javascript">
            $(document).ready(function() {
                $('#carousel').carouFredSel({
                    auto: true,
                    prev: '#prev2',
                    next: '#next2',
                    pagination: {
                        container: ".pager",
                        pagination: {anchorBuilder: function(nr) { return '<a href="#"><span>'+'XXX'+nr+'</span></a>'; }}
                    },
                    width: 700,
                    height: 150,
                    align: 'center',
                    scroll: {
                items: 4,
                fx: "scroll",
                easing: "swing",
                duration: 1000,
                pauseOnHover: true
                        },
                });
            });
            </script>

</head>

编辑：我的错误，我完全忘记发布我的错误控制台所说的内容。它说如下：

错误：TypeError：$（“＃carousel”）。carouFredSel不是函数。

有什么想法吗？任何帮助深表感谢。谢谢！

Answer 1

我已经弄清楚了。我不太确定我做错了什么。以下是我用以下内容替换上述内容：

    <!-- JAVASCRIPT -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
            <script type="text/javascript" src="js/jquery.ui.core.min.js"></script>
            <script type="text/javascript" src="js/jquery.ui.widget.min.js"></script>

有谁知道为什么有效？可能是因为jQUERY在某处被初始化了两次？

carouFredSel在本地工作，但不在MAMP或实时服务器上工作

1 个答案: