我与从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> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </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并希望从中学习 问题。
提前感谢任何花时间看这个的人。
答案 0 :(得分:0)
在用于调用旋转滑块的js中查找类似var foo = jQuery;
的内容,因此在此$
之后不再引用jQuery,因此您的现有代码可能会中断。
在粘贴滑块js后尝试将$
替换为现有js中的foo
。
因此,例如$(document).ready..
变为foo(document).ready..
,依此类推。