我无法同时使用两个jQuery幻灯片
[英]I can't get two jQuery slides to work simultaneously
问题描述
I am trying to get two jQuery slides to work in a HTML page. 
我正在尝试让两个jQuery幻灯片在HTML页面中工作。 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. 单独地，两张幻灯片都可以正常工作，只有当我遇到问题时，才将它们包含在一个HTML页面中。
Please help me understand why the two jQuery slides cant work simultaneously on one page. 请帮助我理解为什么两个jQuery幻灯片不能在一页上同时工作。
Find the source code for the HTML page below: 在下面找到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>
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>
2 个解决方案
解决方案1
1 已采纳 2012-01-16 13:03:54
You would need to start by looking at both your included html files. 您需要先查看两个包含的html文件。 Including two different jquery instances will cause trouble right off the bat. 包含两个不同的jquery实例将立即引起麻烦。
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. 相反，请在页面上引用引用包含在主页<head>标记中的幻灯片的单个jquery脚本。
If after doing this one still does not work, check for duplicate id's in all of your elements between both .html files. 如果执行此操作后仍然无效，请检查两个.html文件之间所有元素的重复ID。
解决方案2
0 2012-01-16 13:08:16
To start, if you include both those pages as you are above then you'll end up with a page with 3 sets of <html> tags and 3 <head> sections, 3 <body> 's etc. 首先，如果同时包含以上两个页面，则最终将得到一个页面，该页面包含3组<html>标记和3个<head>部分，3个<body>等。
You'll also end up including JQuery more than once, which can cause problems. 您还将最终多次包含JQuery，这可能会引起问题。
You'd be better creating one page (ie 1 set of <html> , <head> , and <body> tags), and just create new instances for each slideshow on that page. 您最好创建一个页面（即，一组<html> ， <head>和<body>标签），然后为该页面上的每个幻灯片创建新实例。
Creating an instance on div with id="lofslidecontent45" : 使用id =“ lofslidecontent45”在div上创建实例：
<script type="text/javascript">
$( function(){
$('#lofslidecontent45').lofJSidernews( {
interval:4000,
easing:'easeOutBounce',
duration:1200,
auto:true
} );
});
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
我无法让我的jquery在我的wordpress网站上工作 - I can't get my jquery to work in my wordpress site
为什么不能有两个单独的函数同时返回两个不同的视图？ - Why can't I have two separate functions returning two different views simultaneously?
无法让jQuery的.replaceWith（）工作？ - Can't get jQuery's .replaceWith() to work?
无法使Jquery代码在点击时起作用 - Can't get Jquery code to work on click
如何同时启动两个进程？ - How can I start two processes simultaneously?
我不能让phpseclib工作 - I can't get phpseclib to work
我无法让Yii Crud上班 - I can't get Yii crud to work
无法进行预匹配以在两个书挡字符串之间工作 - Can't get preg match to work between two bookend strings
jQuery的同时上传两个文件 - jquery upload two files simultaneously
无法让 javascript、JQuery 与我的 PHP 一起使用 - Can't get javascript, JQuery to work with my PHP
相关标签