Link to website
我确定冲突是在我的页面幻灯片和图像滑块之间。
这是页面幻灯片的代码:
<ul>
<li>
<a href="javascript:$.pageslide({ direction: 'right', href: '_secondary.html' })" class="first">Slide to the right, and load content from a secondary page.</a>
</li>
<li>
<a href="javascript:$.pageslide({ direction: 'left', href: '/template/_secondary.html' })" class="second">Open the page programatically.</a>
</li>
</ul>
<script>
var jq171 = jQuery.noConflict();
</script>
<script src="/template/js/jquery-1.7.1.min.js"></script>
<script src="/template/js/jquery.pageslide.js"></script>
<script>
/* Default pageslide, moves to the right */
$(".first").pageslide({ direction: "right"});
/* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
$(".second").pageslide({ direction: "left"});
</script>`
这是图像滑块:此代码引用了两个jQuery库-v1.5.1和orbit-1.2.3
<div class="container" style="margin-top:20px; margin-left:10px;">
<div id="featured">
<a href=""><img src="*****" /></a>
<a href=""><img src="*****" /></a>
<a href=""><img src="*****" /></a>
<a href=""><img src="*****" /></a>
<a href=""><img src="*****" /></a>
</div>
一分钟,我让他们俩一起工作,但是我不确定是什么原因导致了冲突。我尝试了不同版本的无冲突脚本。.如果您需要更多信息来帮助我,请告诉我。谢谢!
最佳答案
由于库脚本加载的速度存在差异,因此该代码有时会起作用,而其他代码则不会起作用。有时,它的加载速度足够快,可以在您开始使用它时就位,有时甚至没有。这就是为什么您应该将初始代码放在ready
块中的原因:
<script src="/template/js/jquery-1.7.1.min.js"></script>
<script src="/template/js/jquery.pageslide.js"></script>
<script type="text/javascript">
var jq171 = jQuery.noConflict();
jq171.ready(function ($) {
/* Default pageslide, moves to the right */
$(".first").pageslide({ direction: "right"});
/* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
$(".second").pageslide({ direction: "left"});
});
</script>
另外,我敦促您重新考虑在同一页面甚至同一站点上使用两个库。一个就够了!
文献资料
jQuery
ready
-http://api.jquery.com/ready/