页面中需要用到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模块化相关的东西,你将获益匪浅。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。