【发布时间】：2013-06-10 09:34:26
【问题描述】：
我正在使用来自 googleapis 的两个不同的 jquery.min.js 文件。一个用于幻灯片（s3Slider），另一个用于用户向下滚动时应跟随的菜单。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>对于滑块
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>菜单
当我同时拥有两者时，当一个向下滚动时，菜单会随着页面停止向下...
有什么解决办法吗？
下面是 HTML：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<link rel="stylesheet" type="text/css" href="assets/styles/style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="assets/styles/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" type="text/css" href="assets/styles/imgsldr.css" media="screen" />
<!--[if lt IE 9]><script type="text/javascript" src="assets/scripts/modernizr.js"></script><![endif]-->
</head>
<body>
<div class="wrapper">
<header>
<blockquote>Genom att förena två sjöer skapar vi en framtid mitt i landbygden!</blockquote>
</p></div><br></div>
</header>
<div class="nav-container">
<nav>
<ul>
<li><a href="#hem" class="selected">Hem</a></li>
<li><a href="#om">Om projektet</a></li>
<li><a href="#sponsor">Sponsorer</a></li>
<li><a href="#galleri">Galleri</a></li>
<li><a href="#medlem">Bli medlem</a></li>
<li><a href="#styr">Styrelse och funkt.</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
<div class="nav-left"></div>
<div class="nav-right"></div>
<div class="nav-above"></div>
</nav>
</div>
<section id="hem">
<div class="row">
<div class="three columns">
<h4>Hem</h4>
<p> </p>
<div id="nyheter">
<p id="nyheterp">NYHETER</p>
<p><br>
</p>
<h5>Nyhet #1</h5>
</div>
</div>
<div class="nine columns">
<h4>Bilder från projektet </h4>
<!-- begins slider -->
<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<img src="assets/gallery/1.jpg" alt="Bild 1" />
<span class="top"><strong>Bild #1</strong><br />Beskrivning...</span>
</li>
<li class="sliderImage">
<img src="assets/gallery/2.jpg" alt="Bild 2" />
<span class="top"><strong>Bild #2</strong><br />Beskrivning...</span>
</li>
<li class="sliderImage">
<img src="assets/gallery/3.jpg" alt="Bild 3" />
<span class="top"><strong>Bild #3</strong><br />Beskrivning...</span>
</li>
<li class="sliderImage">
<img src="assets/gallery/4.jpg" alt="Bild 4" />
<span class="top"><strong>Bild #4</strong><br />Beskrivning...</span>
</li>
<li class="sliderImage">
<img src="assets/gallery/5.jpg" alt="Bild 5" />
<span class="top"><strong>Bild #5</strong><br />Beskrivning...</span>
</li>
<div class="clear sliderImage"></div>
</ul>
</div>
<!--end slider -->
<footer>
<a href="#" target="_blank"><img src="assets/images/facebook.png" alt="Facebook" /></a>
<a href="#" target="_blank"><img src="assets/images/twitter.png" alt="Twitter" /></a>
</footer>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="assets/scripts/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="assets/scripts/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="assets/scripts/waypoints.min.js"></script>
<script type="text/javascript" src="assets/scripts/navbar.js"></script>
<script type="text/javascript" src="assets/scripts/functions.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="assets/scripts/s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
});
</script>
</body>
</html>
【问题讨论】：
-
你为什么同时使用两者？你应该只使用一个，你应该只使用一个，你应该使用最新的一个，所有这些都应该在 html 的 元素中声明部分代码
-
AlvinArulselvan 我试过了，滑块不工作...不知道是不是变量问题？
标签： jquery html google-api conflict image-gallery