javascript functions conflicts
-
03-06-2021 - |
题
I have these scripts for my website but only one function works at a time, whichever code is close to head tag works fine. what is a solution to work both function with out any conflict.
CODE IS GIVEN BELOW:
<script type="text/javascript" src="demo_files/jquery.js"></script>
<script type="text/javascript" src="demo_files/jquery.vticker-min.js"></script>
<script type="text/javascript">
$(function(){
$('#news-container').vTicker({
speed: 500,
pause: 3000,
animation: 'fade',
mousePause: false,
showItems: 3
});
$('#news-container1').vTicker({
speed: 700,
pause: 4000,
animation: 'fade',
mousePause: false,
showItems: 1
});
});
</script>
<style type="text/css">
body{ font-family:Verdana, Arial, serif; font-size:14px;}
</style>
<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$(window).bind('load',
function(e)
{
$.colorbox({opacity:0.3, href:"offer.html"});
});
});
</script>
解决方案
Long Answer: It's because you are including jQuery twice, once right at the top, and again about half way down (a minified version).
The second time you include the library, the $ object will be redefined, overriding the existing instance. Any code attached the $ object when this happend, such as events and plugins, will be lost.
Short Answer: Remove the second copy of jQuery, it should work then.
不隶属于 StackOverflow