JavaScript和jQuery相互冲突

问题描述：

我已经创建了一个网页，页面顶部有一个导航栏，其中有一些翻转图像作为链接。我使用Dreamweaver，因此Dreamweaver为我做了JS。但我最近添加了一个名为Orbit的jQuery图库/幻灯片（Orbit creator：zurb.com/playground/jquery_image_slider_plugin）。JavaScript和jQuery相互冲突

但是，jQuery似乎影响和翻转图像的JavaScript，所以当鼠标滚动时，图像不会改变，不可点击。由于某种原因，它只影响5个链接中的前3个。此外，Chrome，Firefox和Opera也出现了这些问题，但奇怪的是，在Internet Explorer中完全正常。

我试图以各种方式使用jQuery.noConflict，但它不起作用，问题仍然存在。

哪里出现此问题是网络地址：http://www.eastfieldjoinery.com/gallery.html 的网址来了解一下导航栏是应该做的是：www.eastfieldjoinery.com/

下面是鼠标经过图像的JavaScript代码Dreamweaver的组成：

<script type="text/javascript"> 
function MM_swapImgRestore() { //v3.0 
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; 
} 
function MM_preloadImages() { //v3.0 
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); 
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} 
} 

function MM_findObj(n, d) { //v4.01 
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} 
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; 
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); 
    if(!x && d.getElementById) x=d.getElementById(n); return x; 
} 

function MM_swapImage() { //v3.0 
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) 
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} 
} 
</script>

这里是jQuery代码的链接的轨道幻灯片：http://www.eastfieldjoinery.com/JavaScript/jquery.orbit-1.2.3.js

我希望任何解决方案，您可以给我吗。谢谢。

答

在CSS中为您的链接添加z-index：10。这是幻灯片的div块，正在采取鼠标移动。将z-index添加到链接使得它们高于'不可见'div。

谢谢。我没有意识到div阻止了链接。在浏览Chrome的开发者控制台时，我应该看看这个。我现在看起来像个白痴。下次我会考虑三次。再次感谢。 – Studocwho 2013-05-08 04:59:54

答

看来这是一个CSS问题。如果仔细观察，div实际上是悬挂在前3个菜单项上，所以悬停工作正常，div只是重叠菜单项，因此它们不可点击。

你应该尝试添加这只是DIV CLASS = “轨道-包装” 上面>：

<div class="clear"></div>

和CSS：

.clear { 
    clear: both; 
}

而且你可能想带走位置：相对于轨道包装器，并添加一些填充。

另一个选项是一个的z-index增加1轨道，包装DIV，并给予菜单链接10

更多信息的z-index：非常http://www.w3schools.com/cssref/pr_pos_z-index.asp

就好像我没有看到那样！谢谢。我使用z-index选项，因为我认为这是一种更简单的方法。但是，感谢其他建议。 – Studocwho 2013-05-08 05:05:02

JavaScript和jQuery相互冲突

相关推荐