我想在HTML页面中使用两个jQuery幻灯片。 我似乎无法让两张幻灯片同时工作，但我可以一次完成一个工作。单独两张幻灯片都可以很好地工作，只有当我遇到问题时才将它们包含在一个HTML页面上。
请帮助我理解为什么两个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>
在第二张幻灯片下面找到源代码
<!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>
答案 0 :(得分：1)
您需要先查看包含的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
而是在页面上引用包含在主页<head>标记中的幻灯片的单个jquery脚本。
如果在执行此操作后仍然无效，请检查两个.html文件中所有元素中的重复ID。
答案 1 :(得分：0)
首先，如果您同时包含这两个页面，那么您最终会得到一个包含3组<html>标记和3个<head>部分的页面，3 <body>等等。
你最终还会不止一次地包含JQuery，这可能会导致问题。
您最好创建一个页面（即一组<html>，<head>和<body>标签），并为该页面上的每个幻灯片创建新实例。< / p>
在id =“lofslidecontent45”的div上创建实例：
<script type="text/javascript">
$( function(){
$('#lofslidecontent45').lofJSidernews( {
interval:4000,
easing:'easeOutBounce',
duration:1200,
auto:true
} );
});
</script>