Question

我遇到滑动导航和滑块之间存在冲突的JQuery问题。任何帮助，将不胜感激！在Chrome控制台中，我收到了：

Uncaught ReferenceError: $ is not defined smooth-scroll.js:2
Uncaught ReferenceError: jQuery is not defined jquery.sticky.js:112
Uncaught ReferenceError: jQuery is not defined jquery.fancybox-1.3.4.pack.js:46
Uncaught ReferenceError: jQuery is not defined
Uncaught ReferenceError: jQuery is not defined jquery.mousewheel-3.0.4.pack.js:14
Uncaught ReferenceError: $ is not defined index.html:46
Uncaught ReferenceError: $ is not defined index.html:52

这是我的标题：

<head>
  <meta charset="utf-8">
    <title>DCC Marketing - Decatur Illinois Public Relations, Advertising, Strategic Planning, & Web Development</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="robots" content="" />

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Oxygen">
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <link href="css/960.css" rel="stylesheet" type="text/css" />
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    <link href="fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />


    <link rel="stylesheet" href="css/example.css">
    <style>
        body {-webkit-font-smoothing: antialiased;font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;}
        #slides {display: none;margin-top:36px;}
        .slidesjs-container {width:1000px;height:252px;margin-bottom:-21px;}
        #slides .slidesjs-navigation {margin-top:-17px;visibility: hidden;}
        #slides .slidesjs-previous {margin-right: 5px;float: left;visibility: hidden;}
        #slides .slidesjs-next {margin-right: 5px;float: left;visibility: hidden;}
        .slidesjs-pagination {margin: 0px 6px 0;float: right;list-style: none;position:relative;z-index:1000;}
        .slidesjs-pagination li {float: left;margin: 0 1px;}
        .slidesjs-pagination li a {visibility:hidden;display: block;width: 14px;height: 0;padding-top: 14px;background-image: url(images/pagination.png);background-position: 0 0;float: left;overflow: hidden;}
        .slidesjs-pagination li a.active,
        .slidesjs-pagination li a:hover.active {background-position: 0 -14px}
        .slidesjs-pagination li a:hover {background-position: 0 -28px}
        #slides a:link,
        #slides a:visited {color: #333}
        #slides a:hover,
        #slides a:active {color: #9e2020}
        .navbar {overflow: hidden}
    </style>

    <script type="text/javascript" src="js/smooth-scroll.js"></script>
    <script type="text/javascript" src="js/jquery.sticky.js"></script>
    <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript" src="js/jquery.easing-1.3.pack.js"></script>
    <script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="cform.js"></script>

<script type="text/javascript"> // sticky nav bar 
  $(document).ready(function(){
    $("nav").sticky({topSpacing:0});
  });
</script>

<script type="text/javascript"> // fancybox
$(document).ready(function() {

    $("a.single_image").fancybox();

    $("a#inline").fancybox({
        'hideOnContentClick': true
    });

    $("a.group").fancybox({
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   600, 
        'speedOut'      :   900, 
        'overlayShow'   :   false
    });

});
</script>
</head>

以下是设置滑块的正文代码：

    <div id="slides">
    <img src="images/flash1.png">
    <img src="images/flash2.png">
    <img src="images/flash3.png">
      <a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left icon-large"></i></a>
      <a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right icon-large"></i></a>
    </div>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.slides.js"></script>
<script>
$(function(){
  $("#slides").slidesjs({
    play: {
      active: true,
      effect: "slide",
      interval: 5000,
      auto: true,
      swap: true,
      pauseOnHover: true,
      restartDelay: 2500,
      width:936,
      height:247
    }
  });
});
</script>

谢谢！

Answer 1

在加载“js / smooth-scroll.js”之前加载“js / jquery-1.9.1.min.js”。

Answer 2

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

将其移到顶部。它应该包括在包括任何其他脚本

之前

Answer 3

Jquery javascript文件应首先加载，因此，请尝试将其移至顶部

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

未捕获的ReferenceError - Jquery冲突

3 个答案: