prototype.js与jquery 引发的浏览器兼容问题

页面中需要用到prototype.js和jQuery slide 这两个文件。prototype.js是下拉导航菜单需要用到，jQuery slide则是幻灯片播放需要用到。

把prototype.js放在jQuery slide的后面，并把jQuery slide里的$都改为jQuery。在IE11下，prototype.js和jQuery slide没有冲突，幻灯片可以正常播放，下拉菜单可以正常弹出；但是在chrome和firefox 下就有问题了。刚打开页面时下拉菜单可以弹出，但第二次把鼠标发到移到菜单上，下拉菜单就无法弹出。

请大家帮我看看这是啥问题，顺便提供一下解决办法，谢谢！
jQuery slide代码如下：

jQuery(function(){
var numpic = jQuery('#slides li').size()-1;
var nownow = 0;
var inout = 0;
var TT = 0;
var SPEED = 5000;


jQuery('#slides li').eq(0).siblings('li').css({'display':'none'});


var ulstart = '<ul id="pagination">',
    ulcontent = '',
    ulend = '</ul>';
ADDLI();
var pagination = jQuery('#pagination li');
var paginationwidth = jQuery('#pagination').width();
jQuery('#pagination').css('margin-left',(470-paginationwidth))

pagination.eq(0).addClass('current')

function ADDLI(){
    //var lilicount = numpic + 1;
    for(var i = 0; i <= numpic; i++){
        ulcontent += '<li>' + '<a href="javascript:void(0)">' + (i+1) + '</a>' + '</li>';
    }

    jQuery('#slides').after(ulstart + ulcontent + ulend);   
}

pagination.on('click',DOTCHANGE)

function DOTCHANGE(){

    var changenow = jQuery(this).index();

    jQuery('#slides li').eq(nownow).css('z-index','900');
    jQuery('#slides li').eq(changenow).css({'z-index':'800'}).show();
    pagination.eq(changenow).addClass('current').siblings('li').removeClass('current');
    jQuery('#slides li').eq(nownow).fadeOut(400,function(){jQuery('#slides li').eq(changenow).fadeIn(500);});
    nownow = changenow;
}

pagination.mouseenter(function(){
    inout = 1;
})

pagination.mouseleave(function(){
    inout = 0;
})

function GOGO(){

    var NN = nownow+1;

    if( inout == 1 ){
        } else {
        if(nownow < numpic){
        jQuery('#slides li').eq(nownow).css('z-index','900');
        jQuery('#slides li').eq(NN).css({'z-index':'800'}).show();
        pagination.eq(NN).addClass('current').siblings('li').removeClass('current');
        jQuery('#slides li').eq(nownow).fadeOut(400,function(){jQuery('#slides li').eq(NN).fadeIn(500);});
        nownow += 1;

    }else{
        NN = 0;
        jQuery('#slides li').eq(nownow).css('z-index','900');
        jQuery('#slides li').eq(NN).stop(true,true).css({'z-index':'800'}).show();
        jQuery('#slides li').eq(nownow).fadeOut(400,function(){jQuery('#slides li').eq(0).fadeIn(500);});
        pagination.eq(NN).addClass('current').siblings('li').removeClass('current');

        nownow=0;

        }
    }
    TT = setTimeout(GOGO, SPEED);
}

TT = setTimeout(GOGO, SPEED); 

})

---

看到这个问题，我的第一反应就是使用匿名的闭包呀。把所有的用jQuery代码写的放到一个闭包里面。

(function ($) {
  console.log($); //这里的$ === jQuery
})(jQuery);

或者，像楼主写的那样

jQuery(function ($) { //注意：这里是有一个参数的
  //$ === jQuery
});

只不过这里面的代码会在页面加载完之后执行，等同于jQuery(document).ready()。

Prototype相关的代码也可以这样写。

建议楼主去了解一下匿名闭包（立即执行函数）以及JS模块化相关的东西，你将获益匪浅。
PS：上面这样写是很有必要的，绝对不是为了耍酷。