0

我正在使用来自 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>&nbsp;</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>
4

2 回答 2

0

正如 Martin 所说，将脚本放在 HTML 的标记中，否则它将在 HTML DOM 运行后执行。

代码片段如下... 

    <!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" />

        <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="assets/scripts/s3Slider.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $('#slider').s3Slider({
                    timeOut: 3000
                });
            });
        </script>

        <!--[if lt IE 9]><script type="text/javascript" src="assets/scripts/modernizr.js"></script><![endif]-->
        </head>
        <body>

//Continue Rest of your code here...
于 2013-06-11T03:12:09.903 回答
0

解决方案是不加载两者。您只需要为菜单加载一个，滑块也将使用它。

将它放在<head>源代码的部分中，以确保在您的两个插件需要它时加载它。

于 2013-06-10T09:42:43.740 回答