javascript - Akan ada konflik apabila menggunakan pemalam jquery pada halaman yang sama Bagaimana untuk menyelesaikannya? ?
滿天的星座
滿天的星座 2017-06-12 09:30:10
0
4
1494

Hanya satu halaman berfungsi dengan baik, tetapi terdapat masalah apabila dua diletakkan pada satu halaman Bagaimana saya boleh mengubah suainya?

Panggil

$(fungsi ()

{

var opt1 = {

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

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

});

(fungsi ($)

 {
     $.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>

滿天的星座
滿天的星座

membalas semua(4)
刘奇

Saya tidak faham apa yang anda ingin nyatakan dalam huraian, tetapi jika anda maksudkan bahawa jika anda memperkenalkan satu jQuery.js, pemalam anda akan dijalankan, tetapi jika anda memperkenalkan dua, ia tidak akan berfungsi. Anda boleh lihat ini
http://blogread.cn/it/article...

学习ing

Tajuk dan penerangan anda tidak konsisten

给我你的怀抱

Cuba $.noConflict()? ?

代言

Kedua-dua pemalam beroperasi pada dom yang sama yang anda mahu dom ini dengari?
Jangan gunakan terlalu banyak pemalam, ubah suainya dengan sewajarnya, jika tidak, anda tidak akan dapat memberitahu apa-apa tanpa melihat gambar sebenar

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan