我无法同时使用两个jQuery幻灯片 [英] I can't get two jQuery slides to work simultaneously
本文介绍了我无法同时使用两个jQuery幻灯片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图让两个jQuery幻灯片在HTML页面中工作。
我似乎无法让两张幻灯片同时工作，但我可以一次完成一项工作。单独的两张幻灯片都能很好地工作，只有在我遇到问题时才将它们包含在一个HTML页面中。
请帮我理解为什么这两个jQuery幻灯片不能同时在一页上工作。
找到下面HTML页面的源代码：
< HTML>
< head>
< title>测试两个滑条< / title>
< / head>
< body>
<！ - #####第一张幻灯片#### - >
<？php include（homeSliderOrg.html）;？>
< br> <峰; br>
<！ - ##### Second Slide #### - >
<？php include（easyAccordian.html）;？>
< / body>
< / html>
在源代码下面找到第一张幻灯片
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< title> Lof JSliderNews 1.0 - Jquery 1.3< / title>
< link rel =stylesheettype =text / csshref =css / layout.css/>
< link rel =stylesheettype =text / csshref =css / style0.css/>
< script language =javascripttype =text / javascriptsrc =js / jquery.js>< / script>
< script language =javascripttype =text / javascriptsrc =js / jquery.easing.js>< / script>
< script language =javascripttype =text / javascriptsrc =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;
}
/ *将主wapper移动到右侧* /
.lof-snleft .lof-main-wapper {
margin-left：auto;
margin-right：inherit;
明确：两者;
height：300px;
}
/ *将导航器移动到左侧* /
.lof-snleft .lof-navigator-outer {
left：0;
top：0;
正确：继承;
}
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&缓动插件< / h1> - >
<！！-------------------------------------内容-------------------------------------------------> ;
< div id =lofslidecontent45class =lof-slidecontent lof-snleft>
< div class =preload>< div>< / div>< / div>
<！ - 主要内容 - >
< div class =lof-main-outer>
< ul class =lof-main-wapper>
< li>
< img src =images / 791902news3.jpgtitle =Newsflash 2height =300width =900>
< div class =lof-main-item-desc>
< h3>< a target =_ parenttitle =Newsflash 2href =＃> Newsflash 2< / a>< / h3>
< p>网站的一件事情，它总是在变化！的Joomla！可以轻松添加文章，内容...< / p>
< / div>
< / li>
< li>
< img src =images / 435576news10.jpgtitle =Newsflash 1height =300width =900> < div class =lof-main-item-desc>
< h3>< a target =_ parenttitle =Newsflash 1href =＃> Newsflash 1< / a>< / h3>
< p> Joomla！可以轻松启动任何类型的网站。无论您想要宣传册网站还是您...< / p>
< / div>
< / li>
< li>
< img src =images / 641906img1.jpgtitle =Newsflash 3height =300width =900> < div class =lof-main-item-desc>
< h3>< a target =_ parenttitle =Newsflash 3href =＃> Newsflash 3< / a>< / h3>
< p>拥有数千个免费扩展程序库，您可以随着网站的增长添加所需内容。不要...< / P>
< / div>
< / li>
< li>
< img src =images / 416719news7.jpgtitle =Newsflash 5height =300width =900> < div class =lof-main-item-desc>
< h3>< a target =_ parenttitle =Newsflash 5href =＃> Newsflash 5< / a>< / h3>
< p> Joomla！ 1.5 - '体验自由'！创建自己的动态网络从未如此简单...< / p>
< / div>
< / li>
< li>
< img src =images / 416719news7.jpgtitle =Newsflash 5height =300width =900> < div class =lof-main-item-desc>
< h3>< a target =_ parenttitle =Newsflash 5href =＃> Newsflash 5< / a>< / h3>
< p> Joomla！ 1.5 - '体验自由'！创建自己的动态网络从未如此简单...< / p>
< / div>
< / li>
< li>
< img src =images / 416719news7.jpgtitle =Newsflash 5height =300width =900> < div class =lof-main-item-desc>
< h3>< a target =_ parenttitle =Newsflash 5href =＃> Newsflash 5< / a>< / h3>
< p> Joomla！ 1.5 - '体验自由'！创建自己的动态网络从未如此简单...< / p>
< / div>
< / li>
< / ul>
< / div>
<！ - 结束主要内容 - >
<！ - 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> - 在身份证，mauris viverra asperiores，身份证bibendum。 Eu molestie。 Ac sit eu ...
< / div>
< / li>
< li>
< div>
< img src =images / lofthumbs / 435576news10.jpg/>
< h3> NewsFlash 2< / h3>
< span> 20.01.2010< / span> - 在身份证，mauris viverra asperiores，身份证bibendum。 Eu molestie。 AC坐在欧盟。 ..
< / div>
< / li>
< li>
< div>
< img src =images / lofthumbs / 641906img1.jpg/>
< h3> NewsFlash 3< / h3>
< span> 20.01.2010< / span> - 在身份证，mauris viverra asperiores，身份证bibendum。 Eu molestie。 AC坐在欧盟。 ..
< / div>
< / li>
< li>
< div>
< img src =images / lofthumbs / 416719news7.jpg/>
< h3> NewsFlash 4< / h3>
< span> 20.01.2010< / span> - 在身份证，mauris viverra asperiores，身份证bibendum。 Eu molestie。 AC坐在欧盟。 ..
< / div>
< / li>
< li>
< div>
< img src =images / lofthumbs / 641906img1.jpg/>
< h3> NewsFlash 5< / h3>
< span> 20.01.2010< / span> - 在身份证，mauris viverra asperiores，身份证bibendum。 Eu molestie。 AC坐在欧盟。 ..
< / div>
< / li>
< li>
< div>
< img src =images / lofthumbs / 416719news7.jpg/>
< h3> NewsFlash 6< / h3>
< span> 20.01.2010< / span> - 在身份证，mauris viverra asperiores，身份证bibendum。 Eu molestie。 AC坐在欧盟。 ..
< / div>
< / li>
< / ul>
< / div>
< / div>
< script type =text / javascript>
< / script>
<！------------------------------------- END OF内容 - - - - - - - - - - - - - - - - - - - - - - - - - >
<！ - < p>
< a href =index.html>演示1< / a> | < a href =index2.html>演示2< / a> | < a href =index3.html>演示3< / a> | < a href =index4.html>演示4< / a> | < a href =index5.html>演示5< / a> | < a href =index6.html>演示6< / a> < / p为H.
- >
<！ -
< div id =footer>
< a href =http://landofcoder.com> LandOfCoder.Com< / a>
< / div>
- >
< / div>
< / body>
< / html>
查看源代码到第二张幻灯片
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org /TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html xmlns =http://www.w3.org/1999/xhtmllang =en>
< head>
< title> jQuery Easy Accordion Plugin< / title>
<！ - 元 - >>
< meta http-equiv =content-typecontent =text / html; charset = iso-8859-1/>
< meta name =authorcontent =Andrea Cima Serniotti - Madeincima.eu/>
< meta name =descriptioncontent =jQuery Easy Accordion Plugin - 一个高度灵活的定时水平滑块，能够显示任何类型的内容/>
< meta name =keywordscontent =jQuery，plugin，accordion，slider，slideshow，horizontal，timed，interval/>
<！ - 脚本 - >
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js>< / script>
< script type =text / javascriptsrc =js / jquery.easyAccordion.js>< / script>
< script type =text / javascriptsrc =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-身高：170％; margin-bottom：20px}
/ *如果您不知道自己正在做什么，请不要更改以下规则* /
.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-手风琴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）;}
/ *免费定制以下规则* /
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-weight：bold; font-family：Tahoma，Geneva，sans-serif; text-transform：uppercase; letter-spacing：1px; background：#fff url（images / slide-title- （images-slide-title-inactive-1.jpg）0 0 no-repeat; color：＃26526c}
＃accordion-1 dt.active {cursor：pointer; color：#fff; background：#fff url 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.acti ve {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-f amily：Tahoma，日内瓦，sans-serif; text-transform：大写; letter-spacing：1px;背景：#fff url（images / slide-title-inactive-2.jpg）0 0无重复;颜色：＃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;
＃accordion-3 .active .slide-number {color：#fff}
＃accordion-3 a {color：＃68889b}
＃font-weight：bold} 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>欢迎您< / h2>
- >
< div id =accordion-1>
< dl>
< dt>第一张幻灯片< / dt>
< dd>< h2>您的成功之旅从这里开始！< / h2>< p>< img src =images / monsters / img1.pngalt =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继承了马萨人的产业蒙特斯，nascetur ridiculus mus。 Donec quam felis，ultricies nec，pellentesque eu，enim。< br />< a href =＃class =more>阅读更多内容< / a>< / p>< / dd>
< dt>第二张幻灯片< / dt>
< dd>< h2>我们的成功率取决于：< / h2>< p>< img src =images / monsters / img2.pngalt =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继承了马萨人的产业蒙特斯，nascetur ridiculus mus。 Donec quam felis，ultricies nec，pellentesque eu，enim。< br />< a href =＃class =more>阅读更多内容< / a>< / p>< / dd>
< dt>另一张幻灯片< / dt>
< dd>< h2>科学验证的职业指导工具< / h2>< p>< img src =images / monsters / img3.pngalt =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继承了马萨人的产业蒙特斯，nascetur ridiculus mus。 Donec quam felis，ultricies nec，pellentesque eu，enim。< br />< a href =＃class =more>阅读更多内容< / a>< / p>< / dd>
< dt>另一张幻灯片< / dt>
< dd>< h2>另一张幻灯片转到此处< / h2>< p>< img src =images / monsters / img4.pngalt =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继承了马萨人的产业蒙特斯，nascetur ridiculus mus。 Donec quam felis，ultricies nec，pellentesque eu，enim。< br />< a href =＃class =more>阅读更多内容< / a>< / p>< / dd>
< dt>再多一次< / dt>
< dd>< h2>< h2>< / h2>< p>< img src =images / monsters / img5.pngalt =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继承了马萨人的产业蒙特斯，nascetur ridiculus mus。 Donec quam felis，ultricies nec，pellentesque eu，enim。< br />< a href =＃class =more>阅读更多内容< / a>< / p>< / dd>
< dt>上一个< / dt>
< dd>< h2>这绝对是最后一个< / h2>< p>< img src =images / monsters / img6.pngalt =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继承了马萨人的产业蒙特斯，nascetur ridiculus mus。 Donec quam felis，ultricies nec，pellentesque eu，enim。< br />< a href =＃class =more>阅读更多内容< / a>< / p>< / dd>
< / dl>
< / div>
< / div>
< / body>
< / html>
解决方案
您需要先查看包含的内容html文件。
包含两个不同的jquery实例将直接导致问题。
第一张幻灯片：
script language =javascripttype =text / javascriptsrc =js / jquery.js
第二张幻灯片：
script type =text / javascriptsrc =http： //ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
请在页面中引用包含在主页面< head> 标记中的幻灯片上的单个jquery脚本。
如果执行此操作后仍然无效，请在两个.html文件之间的所有元素中检查重复的ID。
I am trying to get two jQuery slides to work in a HTML page. I can't seem to get both of the slides to work simultaneously, however I can make one work at a time. Individually both slides work well, it's only when I include them on one HTML page when I get an issue.
Please help me understand why the two jQuery slides cant work simultaneously on one page.
Find the source code for the HTML page below:
<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>
Find below the Source Code to the first slide
<!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>
Find below the Source Code to the second 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>
解决方案
You would need to start by looking at both your included html files. Including two different jquery instances will cause trouble right off the bat.
First slide:
script language="javascript" type="text/javascript" src="js/jquery.js"
Second slide:
script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
Instead do a single jquery script on the page referencing your slides included in the main page <head> tag.
If after doing this one still does not work, check for duplicate id's in all of your elements between both .html files.
这篇关于我无法同时使用两个jQuery幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
