javascript - Il y aura des conflits lorsque le plug-in Jquery est utilisé sur la même page. Comment résoudre ce problème? ?

Question

Une seule page fonctionne bien, mais il y a un problème lorsque deux sont placées sur une seule page. Comment puis-je la modifier ?

Appeler

$(fonction ()

{

var opt1 = {

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

    };
    $("#mp_gnq").demo(opt1);

});

(fonction ($)

 {
     $.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);
            }

 });

})(jQuery);

<ul id="mp_gnq">

    <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>

</ul>

Answer 1

Je ne comprends pas ce que vous voulez exprimer dans la description, mais si vous voulez dire que si vous introduisez un jQuery.js, votre plug-in fonctionnera, mais si vous en introduisez deux, cela ne fonctionnera pas. Vous pouvez jeter un œil à ceci
http://blogread.cn/it/article...

Answer 2

Votre titre et votre description sont incohérents

Answer 3

Essayez $.noConflict() ? ?

Answer 4

Les deux plug-ins fonctionnent sur le même dom. Qui voulez-vous que ce dom écoute ?
N'utilisez pas trop de plug-ins, modifiez-les en conséquence, sinon vous ne pourrez rien dire sans regarder l'image réelle