我如何解决冲突在我的javascript代码

How can i resolve a conflict in my javascript code?

本文关键字:冲突 我的 javascript 代码 解决 何解决      更新时间:2023-09-26

这是代码:

<script>var jQuery132 = $.noConflict(true);</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://risq.github.io/jquery-advanced-news-ticker/assets/js/jquery.newsTicker.js"></script>
<style>
.newsticker {
    max-width: 620px;
    margin: auto;
}
.newsticker li {
    color: #4e4e4e;
    background: #F2F2F2;
    overflow: hidden;
    height: 28px;
    padding: 10px;
    line-height: 30px;
    list-style: none;
    font-size: 20px;
    text-align: left;
    border-bottom: 1px dotted #2c8162;
}
.newsticker li:hover {
    background: #FFF;
}
</style>
<script>
    var count = 300;
    var counter = setInterval(timer, 1000); //1000 will  run it every 1 second
    function timer() {
    count = count - 1;
    if (count == -1) {
            clearInterval(counter);
            return;
    }
    var seconds = count % 60;
    var minutes = Math.floor(count / 60);
    var hours = Math.floor(minutes / 60);
    minutes %= 60;
    hours %= 60;
    document.getElementById("timer").innerHTML = hours + " Hours " + minutes + " Minutes and " + seconds + " Seconds left untill the next news update."; // watch for spelling
    }
    function news(){
   $('body').find('.newsticker').remove();//It will clear old data if its present 
   var file = "http://newsxpressmedia.com/files/theme/test.txt";
    $.get(file, function (txt) {
            //var lines = txt.responseText.split("'n");
            var lines = txt.split("'n");
            $ul = $('<ul class="newsticker" />');
            for (var i = 0, len = lines.length; i < len; i++) {
                //save(lines[i]); // not sure what this does
                $ul.append('<li>' + lines[i] + '</li>'); //here 
            }
            //$ul.appendTo('body').newsTicker({
            $ul.appendTo('div.wcustomhtml').newsTicker({
                row_height: 48,
                max_rows: 2,
                speed: 6000,
                direction: 'up',
                duration: 1000,
                autostart: 1,
                pauseOnHover: 1
            });
    });
    }
    $(function() {
    news();
    setInterval(function(){
      news();
    },30000)  // it will call every 1 min you can change it
    });
</script>
<br><br><span id="timer"></span><br><br>

<script language='JavaScript'>
$(function(){
 $("ul#ticker01").liScroll();
});
/*!
 * liScroll 1.0
 * Examples and documentation at:
 * http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html
 * 2007-2010 Gian Carlo Mingati
 * Version: 1.0.2.1 (22-APRIL-2011)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 * Requires:
 * jQuery v1.2.x or later
 *
 */
jQuery.fn.liScroll = function(settings) {
  settings = jQuery.extend({
  travelocity: 0.10
  }, settings);  
  return this.each(function(){
    var $strip = jQuery(this);
    $strip.addClass("newsticker")
    var stripWidth = 1;
    $strip.find("li").each(function(i){
    stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
    });
    var $mask = $strip.wrap("<div class='mask'></div>");
    var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");        
    var containerWidth = $strip.parent().parent().width(); //a.k.a. 'mask' width  
    $strip.width(stripWidth);   
    var totalTravel = stripWidth+containerWidth;
    var defTiming = totalTravel/settings.travelocity; // thanks to Scott Waye  
    function scrollnews(spazio, tempo){
    $strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
    }
    scrollnews(totalTravel, defTiming);    
    $strip.hover(function(){
    jQuery(this).stop();
    },
    function(){
    var offset = jQuery(this).offset();
    var residualSpace = offset.left + stripWidth;
    var residualTime = residualSpace/settings.travelocity;
    scrollnews(residualSpace, residualTime);
    });   
  }); 
};
</script>
<style>
/* liScroll styles */
.tickercontainer { /* the outer div with the black border */
border: 1px solid #000;
background: #fff;
width: 500px;
height: 27px;
margin: auto 0;
padding: 0;
overflow: hidden;
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
left: 10px;
top: 8px;
width: 500px;
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
left: 500px;
font: bold 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 0;
padding: 0;
background: #fff;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;
color: #ff0000;
font: bold 10px Verdana;
margin: 0 50px 0 0;
}
ul.newsticker span {
margin: 0 10px 0 0;
}
</style>
<ul id="ticker01">
 <li><span>10/10/2007</span><a href="#">The first thing ...</a></li>
 <li><span>10/10/2007</span><a href="#">End up doing is ...</a></li>
 <li><span>10/10/2007</span><a href="#">The code that you ...</a></li>
 <!-- eccetera -->
</ul>

我使用两个不同的jquery newsticker示例:

第一个结束于:

<br><br><span id="timer"></span><br><br>

从这里开始是第二个。

我现在还在代码的顶部添加了这个变量jQuery132:

<script>var jQuery132 = $.noConflict(true);</script>

这是一篇关于jQuery冲突的好文章。

代码如下:

<!-- load jQuery version 1.9.0 -->
<script src="jquery-1.9.0.js" type="text/javascript"></script>
<script type="text/javascript">
var $jQuery1_9 = $.noConflict(true);// Here you must need to pass true
                                    //else it will only free $ variable
                                    //and using jQuery with blow libraries
                                    //cause conflict
</script>
//you must load second library later after initializing
//first instance of version and freeup jQuery keyword
//else jQuery keyword will
//cause conflict it you uplaoded both files.
<!-- load jQuery version 1.10.0 -->
<script src="jquery-1.10.0.js" type="text/javascript"></script>
<script type="text/javascript">
var $jQuery1_10 = $.noConflict(true);
</script>
//so now here $ and jQuery both cannot be used
//using $jQuery1_10 will call version 1.10.0 library code
$jQuery1_10( "div p" ).show();
//using $jQuery1_9 will call version 1.9.0 library code
$jQuery1_9( "div p" ).show();