我遇到一個滑動導航和一個滑塊之間發生衝突的jQuery的問題。任何幫助,將不勝感激!在Chrome中控制檯,我得到:未捕獲的ReferenceError - jQuery的衝突
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>
謝謝!
我看見這一切的jQuery插件...你加載jQuery的地方? – tymeJV 2013-04-10 15:06:42
移動你的jquery.js包括對腳本的上面休息,他們需要它。 – 2013-04-10 15:06:53