javascript - jquery外掛程式在同一個頁面使用會有衝突,要怎麼解決? ?
滿天的星座
滿天的星座 2017-06-12 09:30:10
0
4
1499

單獨在一個頁裡面就好使 放兩個在一個頁面切換就有問題 請問怎麼修改呢

呼叫
$(function ()

{

var opt1 = {

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

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

});

(function ($)

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

滿天的星座
滿天的星座

全部回覆(4)
刘奇

描述中看不懂想表達什麼,但是如果你是說,引入一個jQuery.js那你插件能運行,引入兩個就不行的話。你可以看看這個
http://blogread.cn/it/article...

学习ing

你的標題與表達前後矛盾哦

给我你的怀抱

試試$.noConflict() ? ?

代言

兩個插件都操作在一個dom上,你讓這個dom聽誰的?
插件不要套太多,適當修改吧,另你這個不看實際的圖是看不出來啥的

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板