Rumah  >  Soal Jawab  >  teks badan

javascript - Akan ada konflik apabila menggunakan pemalam jquery pada halaman yang sama Bagaimana untuk menyelesaikannya? ?

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>

滿天的星座滿天的星座2687 hari yang lalu1457

membalas semua(4)saya akan balas

  • 怪我咯

    怪我咯2017-06-12 09:32:10

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

    balas
    0
  • 学习ing

    学习ing2017-06-12 09:32:10

    Tajuk dan penerangan anda tidak konsisten

    balas
    0
  • 给我你的怀抱

    给我你的怀抱2017-06-12 09:32:10

    Cuba $.noConflict()? ?

    balas
    0
  • 代言

    代言2017-06-12 09:32:10

    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

    balas
    0
  • Batalbalas