jQuery事件作业题 1-15 关于mouseover的问题

我已经提交了我的作业题，我发现一个问题，我在chrome浏览器测试是正常的，在safari上的时候，mouseover到main的时候，图片轮播的定时器没有清楚，这是兼容性问题吗？怎么解决？我的js代码如下

var index = 0,

timer = null,

len = $('.pic').length;

$(document).ready(function() {

var main = $('.main');

//鼠标滑入轮播区时，清除定时器

main.mouseover(function(){

if (timer) {

clearInterval(timer);

}

});

//鼠标滑出轮播区时，触发间隔定时器

main.mouseout(function(){

timer = setInterval(function() {

index++;

if (index >= len) {

index = 0;

}

// console.log(index);

changeImg();

},2000);

});

main.mouseout();

//鼠标移入移出左右切换按钮是，按钮背景颜色发生改变。

$('.left, .right').mouseover(function() {

$(this).css('background',"#bbb");

});

$('.left, .right').mouseout(function() {

$(this).css('background',"");

});

//鼠标点击左按钮时，背景图片切换。

$('.left').click(function() {

index--;

if(index<0){

index=4;

}

console.log(index);

changeImg();

});

//鼠标点击右按钮时，背景图片切换。

$('.right').click(function() {

index++;

if(index>4){

index=0;

}

changeImg();

});

$('.dots div').click(function() {

index = $(this).index();

changeImg();

});

});

//changeImg()负责图片轮播效果，这里用的是hide()、show()的方法

function changeImg() {

$('.pic').each(function(){

$(this).hide();

});

$('.dots div').each(function() {

$(this).css({

'background':'#bbb',

'border':'2px solid #fff'

});

$('.dots div').removeClass('borderActive')

})

// //根据index索引找到当前div,将其显示出来

$('.pic').eq(index).show();

$('.dots div').eq(index).css({

'background':'#fff',

'border':'2px solid #bbb'

});

}