Prototype. Js with the browser compatibility issues raised by jquery.

93 5

You need to use prototype. Js and jquery slides in the page. Prototype. Js is a navigation menu, and jquery slides are required for slide playback.

Put prototype. Js behind the jquery slide, and change the $ in the jquery slide to jquery. Under ie11, prototype. Js and jquery slides don't conflict, the slide can play normally, the menu can pop up. But there's a problem with chrome and firefox. The menu can pop up when the page is opened, but the second time the mouse is posted to the menu, the menu won't pop up.

Please help me see what's this problem, and provide a solution, thanks.
Jquery slide code is as follows:

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); 

%.

1 Answers

73 2

To see this problem, my first response is to use anonymous closures. Put all of that in a closure with jQuery code.

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

Or, like,

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

Except that the code is executed after the page is loaded, equivalent to jQuery(document).ready().

Prototype code can be written like this.

It's recommended that you learn about anonymous closures ( immediately executing functions ) and js modularity, and you'll get a.
Ps: it's very necessary to write it on top of it, and it isn't for fun.

...