我不能让两个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幻灯片同时工作

回答

相关问题