我不能讓兩個jQuery幻燈片同時工作

我想讓兩個jQuery幻燈片在HTML頁面中工作。我似乎無法讓兩張幻燈片同時工作，但我可以一次完成一項工作。單獨的兩張幻燈片都能很好地工作，只有在我遇到問題時纔將它們包含在一個HTML頁面中。我不能讓兩個jQuery幻燈片同時工作

請幫我理解爲什麼兩個jQuery幻燈片不能同時在一頁上工作。

查找下面的HTML頁面的源代碼：

<html> 
<head> 
<title>Testing two Sliders</title> 
</head> 

<body> 

<!-- ##### First Slide #### --> 
<?php include("homeSliderOrg.html");?> 

<br> <br> 

<!-- ##### Second Slide #### --> 
<?php include("easyAccordian.html");?> 

</body> 
</html>

找到源代碼下面的第一張幻燈片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Lof JSliderNews 1.0 - Jquery 1.3</title> 
<link rel="stylesheet" type="text/css" href="css/layout.css" /> 
<link rel="stylesheet" type="text/css" href="css/style0.css" /> 
<script language="javascript" type="text/javascript" src="js/jquery.js"></script> 
<script language="javascript" type="text/javascript" src="js/jquery.easing.js"></script> 
<script language="javascript" type="text/javascript" src="js/script.js"></script> 
<script type="text/javascript"> 
$(function(){ 
     $('#lofslidecontent45').lofJSidernews({ interval:4000, 
               easing:'easeOutBounce', 
               duration:1200, 
               auto:true });      
    }); 

</script> 
<style> 
    .lof-snleft .lof-main-outer{ 
     float:right; 
    } 
    /* move the main wapper to the right side */ 
    .lof-snleft .lof-main-wapper{ 
     margin-left:auto; 
     margin-right:inherit; 
     clear:both; 
     height:300px; 
    } 
    /* move the navigator to the left side */ 
    .lof-snleft .lof-navigator-outer{ 
     left:0; 
     top:0; 
     right:inherit; 

    } 

    ul.lof-main-wapper li { 
     position:relative; 
    } 
    .lof-snleft .lof-navigator .active{ 
     background:url(images/arrow-bg2.gif) center right no-repeat; 
    } 
    .lof-snleft .lof-navigator li div{ 
     margin-left:inherit; 
     margin-right:18px; 
    } 

    .lof-snleft .lof-navigator li.active div{ 
     margin-left:inherit; 
     margin-right:18px; 
     background:url(images/grad-bg2.gif) 

    } 
</style> 
</head> 
<body> 
    <div id="container"> 
     <!-- <h1><strong>Lof JSliderNews 1.0</strong> - Jquery 1.3 & Easing plugin</h1> --> 

<!------------------------------------- THE CONTENT -------------------------------------------------> 
<div id="lofslidecontent45" class="lof-slidecontent lof-snleft"> 
<div class="preload"><div></div></div> 
<!-- MAIN CONTENT --> 
    <div class="lof-main-outer"> 
    <ul class="lof-main-wapper"> 
     <li> 
       <img src="images/791902news3.jpg" title="Newsflash 2" height="300" width="900">   
       <div class="lof-main-item-desc"> 
       <h3><a target="_parent" title="Newsflash 2" href="#">Newsflash 2</a></h3> 

       <p>The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,...</p> 
      </div> 
     </li> 
     <li> 
      <img src="images/435576news10.jpg" title="Newsflash 1" height="300" width="900">   <div class="lof-main-item-desc"> 
       <h3><a target="_parent" title="Newsflash 1" href="#">Newsflash 1</a></h3> 
       <p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...</p> 

      </div> 
     </li> 
     <li> 
      <img src="images/641906img1.jpg" title="Newsflash 3" height="300" width="900">   <div class="lof-main-item-desc"> 
       <h3><a target="_parent" title="Newsflash 3" href="#">Newsflash 3</a></h3> 
       <p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...</p> 
      </div> 
     </li> 
     <li> 

      <img src="images/416719news7.jpg" title="Newsflash 5" height="300" width="900">   <div class="lof-main-item-desc"> 
       <h3><a target="_parent" title="Newsflash 5" href="#">Newsflash 5</a></h3> 
       <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p> 
      </div> 
     </li> 

     <li> 

      <img src="images/416719news7.jpg" title="Newsflash 5" height="300" width="900">   <div class="lof-main-item-desc"> 
       <h3><a target="_parent" title="Newsflash 5" href="#">Newsflash 5</a></h3> 
       <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p> 
      </div> 
     </li> 
     <li> 

      <img src="images/416719news7.jpg" title="Newsflash 5" height="300" width="900">   <div class="lof-main-item-desc"> 
       <h3><a target="_parent" title="Newsflash 5" href="#">Newsflash 5</a></h3> 
       <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p> 
      </div> 
     </li> 
     </ul>  
    </div> 
    <!-- END MAIN CONTENT --> 
    <!-- NAVIGATOR --> 

    <div class="lof-navigator-outer"> 
     <ul class="lof-navigator"> 
      <li> 
       <div> 
        <img src="images/lofthumbs/791902news3.jpg" /> 
        <h3> NewsFlash 1 </h3> 
        <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu... 
       </div>  
      </li> 
      <li> 
       <div> 
        <img src="images/lofthumbs/435576news10.jpg" /> 
        <h3> NewsFlash 2 </h3> 
        <span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. .. 
       </div>  
      </li> 

      <li> 
       <div> 
        <img src="images/lofthumbs/641906img1.jpg" /> 
        <h3> NewsFlash 3 </h3> 
        <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. .. 
       </div>  
      </li> 

      <li> 
       <div> 
        <img src="images/lofthumbs/416719news7.jpg" /> 
        <h3> NewsFlash 4</h3> 
        <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. .. 
       </div> 
      </li>  
      <li> 
       <div> 
        <img src="images/lofthumbs/641906img1.jpg" /> 
        <h3> NewsFlash 5</h3> 
        <span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. .. 
       </div> 
      </li> 
      <li> 
       <div> 
        <img src="images/lofthumbs/416719news7.jpg" /> 
        <h3> NewsFlash 6</h3> 
        <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. .. 
       </div> 
      </li>   
     </ul> 
    </div> 
</div> 
<script type="text/javascript"> 

</script> 

<!------------------------------------- END OF THE CONTENT -------------------------------------------------> 
<!-- <p> 
<a href="index.html">Demo 1</a> | <a href="index2.html">Demo 2</a> | <a href="index3.html">Demo 3</a> | <a href="index4.html">Demo 4</a> | <a href="index5.html">Demo 5</a> | <a href="index6.html">Demo 6</a> </p> 
--> 

<!-- 
<div id="footer"> 
    <a href="http://landofcoder.com">LandOfCoder.Com</a> 

</div> 
--> 
    </div> 
</body> 
</html>

找到源代碼下面第二slide

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
     <title>jQuery Easy Accordion Plugin</title> 

     <!-- Meta --> 
     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
     <meta name="author" content="Andrea Cima Serniotti - Madeincima.eu" /> 
     <meta name="description" content="jQuery Easy Accordion Plugin - A highly flexible timed horizontal slider able to show any kind of content" /> 
     <meta name="keywords" content="jQuery, plugin, accordion, slider, slideshow, horizontal, timed, interval" />  

     <!-- Scripts --> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
     <script type="text/javascript" src="js/jquery.easyAccordion.js"></script> 
     <script type="text/javascript" src="js/utility.js"></script> 

     <style type="text/css"> 
      html{font-size:62.5%} 
      body{font-size:1.2em;color:#294f88} 
      .sample{margin:0px;border:1px solid #92cdec;background:#white;padding:0px} 
      h1{margin:0 0 20px 0;padding:0;font-size:2em;} 
      h2{margin:40px 0 20px 0;padding:0;font-size:1.6em;} 
      .easy-accordion h2{margin:0px 0 20px 0;padding:0;font-size:1.6em;} 
      p{font-size:1.2em;line-height:170%;margin-bottom:20px} 


     /* UNLESS YOU KNOW WHAT YOU'RE DOING, DO NOT CHANGE THE FOLLOWING RULES */ 

     .easy-accordion{display:block;position:relative;overflow:hidden;padding:0;margin:0} 
     .easy-accordion dt,.easy-accordion dd{margin:0;padding:0} 
     .easy-accordion dt,.easy-accordion dd{position:absolute} 
     .easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px; /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;} 
     .easy-accordion dd{z-index:1;opacity:0;overflow:hidden} 
     .easy-accordion dd.active{opacity:1;} 
     .easy-accordion dd.no-more-active{z-index:2;opacity:1} 
     .easy-accordion dd.active{z-index:3} 
     .easy-accordion dd.plus{z-index:4} 
     .easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);} 


     /* FEEL FREE TO CUSTOMIZE THE FOLLOWING RULES */ 

     dd p{line-height:120%} 

     #accordion-1{width:800px;height:245px;padding:30px;background:#fff;border:1px solid #b5c9e8} 
     #accordion-1 dl{width:800px;height:245px} 
     #accordion-1 dt{height:46px;line-height:44px;text-align:right;padding:0 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-1.jpg) 0 0 no-repeat;color:#26526c} 
     #accordion-1 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-1.jpg) 0 0 no-repeat} 
     #accordion-1 dt.hover{color:#68889b;} 
     #accordion-1 dt.active.hover{color:#fff} 
     #accordion-1 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px} 
     #accordion-1 .slide-number{color:#68889b;left:10px;font-weight:bold} 
     #accordion-1 .active .slide-number{color:#fff;} 
     #accordion-1 a{color:#68889b} 
     #accordion-1 dd img{float:right;margin:0 0 0 30px;} 
     #accordion-1 h2{font-size:2.5em;margin-top:10px} 
     #accordion-1 .more{padding-top:10px;display:block} 

     #accordion-2{width:700px;height:195px;padding:30px;background:#fff;border:1px solid #b5c9e8} 
     #accordion-2 h2{font-size:2.5em;margin-top:10px} 
     #accordion-2 dl{width:700px;height:195px} 
     #accordion-2 dt{height:56px;line-height:44px;text-align:right;padding:10px 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-2.jpg) 0 0 no-repeat;color:#26526c} 
     #accordion-2 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-2.jpg) 0 0 no-repeat} 
     #accordion-2 dt.hover{color:#68889b;} 
     #accordion-2 dt.active.hover{color:#fff} 
     #accordion-2 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px} 
     #accordion-2 .slide-number{color:#68889b;left:10px;font-weight:bold} 
     #accordion-2 .active .slide-number{color:#fff} 
     #accordion-2 a{color:#68889b} 
     #accordion-2 dd img{float:right;margin:0 0 0 30px;position:relative;top:-20px} 

     #accordion-3{width:700px;height:195px;padding:30px;background:#fff;border:1px solid #b5c9e8} 
     #accordion-3 h2{font-size:2.5em;margin-top:10px} 
     #accordion-3 dl{width:700px;height:195px} 
     #accordion-3 dt{height:56px;line-height:44px;text-align:right;padding:10px 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-2.jpg) 0 0 no-repeat;color:#26526c} 
     #accordion-3 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-2.jpg) 0 0 no-repeat} 
     #accordion-3 dt.hover{color:#68889b;} 
     #accordion-3 dt.active.hover{color:#fff} 
     #accordion-3 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px} 
     #accordion-3 .slide-number{color:#68889b;left:13px;font-weight:bold} 
     #accordion-3 .active .slide-number{color:#fff} 
     #accordion-3 a{color:#68889b} 
     #accordion-3 dd img{float:right;margin:0 0 0 30px;position:relative;top:-20px} 

     </style> 

</head> 
<body> 

    <div class="sample"> 
<!--  <h1>Career Guidance Pro</h1> 

     <h2>Welcomes you</h2> 
--> 
     <div id="accordion-1"> 
      <dl> 
       <dt>First slide</dt> 
       <dd><h2>Your journey to success starts here!</h2><p><img src="images/monsters/img1.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd> 
       <dt>Second slide</dt> 
       <dd><h2>Our success rate is based on:</h2><p><img src="images/monsters/img2.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd> 
       <dt>One more slide</dt> 
       <dd><h2>Scientifically validated career guidance tools</h2><p><img src="images/monsters/img3.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd> 
       <dt>Another slide</dt> 
       <dd><h2>Another slide to go here</h2><p><img src="images/monsters/img4.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd> 
       <dt>Wow one more</dt> 
       <dd><h2>Unbilievable one more slide here</h2><p><img src="images/monsters/img5.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd> 
       <dt>Last one</dt> 
       <dd><h2>This is definitely the last one</h2><p><img src="images/monsters/img6.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd> 
      </dl> 
     </div> 

    </div> 

</body> 
</html>

來源

2012-01-16 SirBT

太多的程序代碼，您不能正常讀取它，你能做出一個的jsfiddle？ – 2012-01-16 12:57:24

您需要首先查看包含的html文件。包含兩個不同的jquery實例將直接導致問題。

第一張幻燈片：

script language="javascript" type="text/javascript" src="js/jquery.js"

第二張幻燈片：

script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

而是做參考你的幻燈片頁上的一個jQuery腳本包含在主<head>頁標籤。

如果這樣做之後仍然不起作用，請在兩個.html文件之間的所有元素中檢查重複的id。

來源

2012-01-16 13:03:54 DevCoDesign

非常感謝。我遵循你的建議，現在它工作！我浪費了很多時間試圖找出問題所在。您的建議非常感謝！ – SirBT 2012-01-16 13:30:56

嗨Datafreak，我只是意識到，它只適用於我的本地服務器，但當我上傳到我的虛擬主機，我不能得到它的工作。有任何想法嗎？ – SirBT 2012-01-16 15:50:05

首先，如果你既包括這些網頁你上面，那麼你會擁有3套的<html>標籤和3個<head>部分頁面，3 <body>的等

你也不止一次地包含JQuery，這可能會導致問題。

您最好創建一個頁面（即1組<html>,<head>和<body>標籤），併爲該頁面上的每個幻燈片創建新實例。

與ID =「lofslidecontent45」分區創建一個實例：

<script type="text/javascript"> 
$(function(){ 
     $('#lofslidecontent45').lofJSidernews({ 
      interval:4000, 
      easing:'easeOutBounce', 
      duration:1200, 
      auto:true 
     });      
    }); 
</script>

來源

2012-01-16 13:08:16 Nick

謝謝尼克，你認爲你可以演示如何創建幻燈片的實例嗎？ – SirBT 2012-01-16 14:59:59

這就是你的頁面代碼，但我已經編輯了我的答案，包括一個例子。 – Nick 2012-01-16 15:09:04

哦謝謝你說得很清楚。非常感謝您的回答 – SirBT 2012-01-16 18:50:11

我不能讓兩個jQuery幻燈片同時工作

回答

相關問題