jQuery与Revolution Slider发生冲突

时间:2013-10-25 05:56:06

标签: jquery conflict

我与从CodeCanyon购买的Revolution Slider发生冲突。我不会在这里发布任何革命滑块代码,所以我不会放弃任何我不应该放弃的东西。

我在网站的其他部分使用以下脚本,只要我放下旋转滑块,这些脚本(如下所示)就不再起作用了。删除滑块,它们再次工作。我可以说两者之间存在某种冲突。

我是jQuery的新手,希望有人能够提供帮助。

$(document).ready(function(){

// hide #back-top first
$("a.back-to-top").hide();

// fade in #back-top
$(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('a.back-to-top').fadeIn();
        } else {
            $('a.back-to-top').fadeOut();
        }
    });

    // scroll body to 0px on click
    $('a.back-to-top').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 400);
        return false;
    });
});


// Tooltips
$("a").LiteTooltip(
    { margin:"0",padding:"6" //padding : "5", etc //
});

});

---------编辑-----------

好的,我知道如果没有代码就很难......就在这里。我希望这会使事情变得更加清晰。

</head>
<body>
   <div id="theme-wrapper">
       <div id="mini-header-wrapper">
          <div class="grid-container mini-header">

          </div>
       </div>

       <div id="nav-header-wrapper">
          <div class="grid-container white-trans-bottom">
             <div class="grid-20 grid-parent">
                 <span style="display:block;line-height:106px;">I am 25% wide</span>
             </div>
             <div class="grid-80 grid-parent">
                 <div id="main-nav">
                 </div>
             </div>
          </div>
       </div>


       <!-- START REVOLUTION SLIDER  -->

       <div id="rev_slider_1_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" style="margin:0px auto;background-color:#E9E9E9;padding:0px;margin-top:0px;margin-bottom:0px;max-height:650px;">
           <div id="rev_slider_1_1" class="rev_slider fullwidthabanner" style="display:none;max-height:650px;height:650;">                      
               <ul>
                   <li data-transition="fade" data-slotamount="7" data-masterspeed="300" >
                      <img src="/files/4413/8267/6500/bg02.jpg"  alt="the7revbg02" >

                   </li>
                   <li data-transition="fade" data-slotamount="7" data-masterspeed="300" >
                      <img src="/files/4413/8267/6504/bg01.jpg"  alt="the7revbg01" >
                   </li>
               </ul>
               <div class="tp-bannertimer"></div>
           </div>
       </div>               

       <script type="text/javascript">
           var tpj=jQuery;
           tpj.noConflict();
           var revapi1;
           tpj(document).ready(function() {

            if (tpj.fn.cssOriginal != undefined)
                tpj.fn.css = tpj.fn.cssOriginal;

            if(tpj('#rev_slider_1_1').revolution == undefined)
                revslider_showDoubleJqueryError('#rev_slider_1_1');
            else
               revapi1 = tpj('#rev_slider_1_1').show().revolution(
                {
                    delay:9000,
                    startwidth:960,
                    startheight:650,
                    hideThumbs:200,

                    thumbWidth:100,
                    thumbHeight:50,
                    thumbAmount:2,

                    navigationType:"none",
                    navigationArrows:"none",
                    navigationStyle:"round",

                    touchenabled:"on",
                    onHoverStop:"off",

                    navigationHAlign:"center",
                    navigationVAlign:"bottom",
                    navigationHOffset:0,
                    navigationVOffset:20,

                    soloArrowLeftHalign:"left",
                    soloArrowLeftValign:"center",
                    soloArrowLeftHOffset:20,
                    soloArrowLeftVOffset:0,

                    soloArrowRightHalign:"right",
                    soloArrowRightValign:"center",
                    soloArrowRightHOffset:20,
                    soloArrowRightVOffset:0,

                    shadow:0,
                    fullWidth:"on",

                    stopLoop:"off",
                    stopAfterLoops:-1,
                    stopAtSlide:-1,

                    shuffle:"off",

                    hideSliderAtLimit:0,
                    hideCaptionAtLimit:0,
                    hideAllCaptionAtLilmit:0,
                    startWithSlide:0    
                });

            }); //ready

        </script>

                        <!-- END REVOLUTION SLIDER -->

            <div id="main-content-wrapper" style="min-height:1000px;">
            <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
            </div>

            <footer class="grey-strip">
                <div class="grid-container"> 
                            <div class="grid-25">
                                    test
                            </div>
                            <div class="grid-25">
                                testing
                            </div>
                            <div class="grid-25">
                                    test
                            </div>
                            <div class="grid-25">
                                testing
                            </div>
                    </div>
            </footer>
            <footer class="basefooter">
                <div class="grid-container"> 
                            <div class="grid-30 footer-logo">
                                    <a href="#" class="footer-logo"><img src="/themes/nextcode/img/logos/nextcode-footer.png" alt="NextCode Creative Gippsland" /></a>
                            </div>
                            <div class="grid-70 mini-nav">
                                <div class="backto-top-btn"><a href="" title="Back to top" class="back-to-top icon-circle-arrow-up icon-2x" data-location="top" data-title="Back to top"></a></div>
                                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Design Services</a></li>
                    <li><a href="#">Our Work</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Support</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>

                            </div>
                    </div>
            </footer>    
</div>


 <script type="text/javascript">
    jQuery(document).ready(function() {

// hide #back-top first
jQuery("a.back-to-top").hide();

// fade in #back-top
$(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            jQuery('a.back-to-top').fadeIn();
        } else {
            jQuery('a.back-to-top').fadeOut();
        }
    });

    // scroll body to 0px on click
    jQuery('a.back-to-top').click(function () {
        jQuery('body,html').animate({
            scrollTop: 0
        }, 400);
        return false;
    });
});


// Tooltips
jQuery("a").LiteTooltip(
    { margin:"0",padding:"6" //padding : "5", etc //
});

    });
</script>

如果有人能够帮助解决这个问题,我会非常喜欢我做错了什么的基本解释。我正在努力学习jQuery并希望从中学习 问题。

提前感谢任何花时间看这个的人。

1 个答案:

答案 0 :(得分:0)

在用于调用旋转滑块的js中查找类似var foo = jQuery;的内容,因此在此$之后不再引用jQuery,因此您的现有代码可能会中断。

在粘贴滑块js后尝试将$替换为现有js中的foo

因此,例如$(document).ready..变为foo(document).ready..,依此类推。