javascript - There will be conflicts when using jquery plug-in on the same page. How to solve it? ?

Question

It works just fine if it is alone in one page. But there is a problem if two of them are switched on the same page. How can I modify it?

Call
$(function ()

<code>{</code>

var opt1 = {

<code>        "speed": "slow", //变换速度,三速度可选 slow,normal,fast;
        "by": "mouseover", //触发事件,click或者mouseover;
        "auto": true, //是否自动播放;
        "sec": 1000             //自动播放间隔;

    };
    $("#mp_gnq").demo(opt1);</code>

});

(function ($)

<code> {
     $.fn.extend({
         demo: function (opt)
         {
             var opt = arguments[0] ? arguments[0] : false;
             var $button = $(this).children("li");         //容器;
             var $sec = 3000;             //自动播放默认时间;
             var $min = $button.last().width();         //最小宽度;
             var $max = $button.first().width();         //最大宽度;
             var $index = 1;         //轮播开始索引号;
             $default = {
                 speed:opt.speed?opt.speed:"slow",
                 by: opt.by ? opt.by : "mouseover",
                 auto: opt.auto ? opt.auto : false,
                 sec: opt.sec ? opt.sec < 1000 ? 1000 : opt.sec : $sec,
                 maxWidth: $max,
                 minWidth: $min,
                 index: $index
             };
             $button.bind($default.by, this.run).autoPlay();
     },
         run: function ()
         {                                        //运行方法;
             var $obj = $(this);
             if ($obj.width() == $default.minWidth)
             {
                 var timeDo = window.setTimeout(function ()
                 {
                     $default.index = $obj.index();
                     $obj.anim();
                 }, 100);
                 $obj.mouseout(function ()
                 {
                     window.clearTimeout(timeDo);
                 });
             }
         },
         autoPlay: function () {                                    //自动播放;
                if ($default.auto) {
                    var $this = $(this);
                    $this.autoDo();
                    $this.mouseover(function () {
                        window.clearInterval(timeL);

                    });
                    $this.mouseout(function () {
                        $this.autoDo();

                    });
                }
            },
            autoDo: function () {                                        //播放方法;
                var $len = $(this).length - 1;
                var $this = $(this);
                timeL = window.setInterval(function () {
                    $this.eq($default.index).anim();
                    $default.index < $len ? $default.index++ : $default.index = 0;
                }, $default.sec);
            },
            anim: function ()
            {                                        //动画方法;
                var $fx = function ()
                {
                    $(this).siblings("li").animate({
                        width: $default.minWidth}, $default.speed);
                    $(this).animate({
                        width: $default.maxWidth}, $default.speed);
                    $(this).dequeue();
                };
                $(this).queue($fx);
            }

 });</code>

})(jQuery);

<ul id="mp_gnq">

<code>    <li>
         <a href="#"><img src="../image/a1.jpg" width="740"  height="319" class="bor0" /></a>
         <p class="mp_p"></p>
         <span class="mp_a">三亚</span>
         <p class="mp_yi"></p>
      </li>
      <li>
         <a href="#"><img src="../image/a2.jpg" width="740"  height="319" class="bor0" /></a>
         <p class="mp_p"></p>
         <span  class="mp_a">杭州</span>
         <p class="mp_yi"></p>
      </li>
      <li>
         <a href="#"><img src="../image/a3.jpg" width="740"  height="319" class="bor0" /></a>
         <p class="mp_p"></p>
         <span  class="mp_a">厦门</span>
         <p class="mp_yi"></p>
      </li>
      <li>
         <a href="#"><img src="../image/a4.jpg" width="740"  height="319" class="bor0" /></a>
         <p class="mp_p"></p>
         <span  class="mp_a">杭州</span>
         <p class="mp_yi"></p>
      </li>
      <li>
         <a href="#"><img src="../image/a5.jpg" width="740"  height="319" class="bor0" /></a>
         <p class="mp_p"></p>
         <span  class="mp_a">厦门</span>
         <p class="mp_yi"></p>
      </li></code>

</ul>

Answer 1

I don’t understand what you want to express in the description, but if you mean that if you introduce one jQuery.js, your plug-in will run, but if you introduce two, it won’t work. You can take a look at this
http://blogread.cn/it/article...

Answer 2

Your title and description are inconsistent

Answer 3

Try $.noConflict()? ?

Answer 4

Both plug-ins operate on the same dom. Who do you want this dom to listen to?
Don’t use too many plug-ins, modify them appropriately, otherwise you won’t be able to tell anything without looking at the actual picture