0

我在使用 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 不是函数。

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

4

1 回答 1

0

我已经想通了。我不太确定我做错了什么。这是我将上面的内容替换为：

    <!-- 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 在某处被初始化了两次？

于 2013-01-30T20:33:09.873 回答