jQuery函数仅工作一次

我已经设置了一个功能，希望在网页上以多种方式使用。

在该示例中，有两个按钮/触发器。一个触发器是一个类，另一个是ID。OverActivate（类）翻转将使.cycle1和.cycle2开始播放。OverDrive（id）翻转将使.cycle3开始播放。

在给定的示例中，该函数被调用了三次。1.它只运行一次。2.它在一个触发器和另一个触发器之间混杂在一起。

id和class的组合不是问题，我已经对其进行了测试。问题似乎在于此功能/循环...

function player() {
    int = setInterval(function(){
        id.eq(i % l);
        i++;
        id.hide().eq(i % l).show();
    }, $speed );
}

但我不知道为什么。

任何帮助将非常感激。

小提琴：

http://jsfiddle.net/HRPLS/1/

jQuery代码：

function mh2($id,$trigger,$speed){
    id = $($id), l = id.length, i = 0;
    id.css({ 'display':'none' });
    $($id+':eq(0)').css({ 'display':'inline' });

var int;
function player() {
    int = setInterval(function(){
        id.eq(i % l); i++; id.hide().eq(i % l).show(); },
        $speed );
    }

$($trigger).mouseenter(function(){
    clearInterval(int);
    player();
}).mouseleave(function(){
    clearInterval(int);
});
}

mh2('.cycle1','.switch',700);
mh2('.cycle2','.switch',500);
mh2('.cycle3','#switch2',300);

HTML示例：

<style>
.switch, #switch2 {
    display:block; padding:10px; color:#fff; background:#888;
}
.switch:hover {
    cursor:pointer; color:#8f8; background:#080;
}
#switch2:hover {
    cursor:pointer; color:#f88; background:#800;
}
.cycle1, .cycle2, .cycle3 {
    border:1px solid #999; max-width:200px; max-height:200px; margin:20px;
}
</style>

<div class="switch">OverActivate</div>

<img src="car1.jpg" class="cycle1">
<img src="car2.jpg" class="cycle1">
<img src="car3.jpg" class="cycle1">
<img src="car4.jpg" class="cycle1">

<img src="tire1.jpg" class="cycle2">
<img src="tire2.jpg" class="cycle2">
<img src="tire3.jpg" class="cycle2">
<img src="tire4.jpg" class="cycle2">

<hr>

<div id="switch2">OverDrive</div>

<img src="bike1.jpg" class="cycle3">
<img src="bike2.jpg" class="cycle3">
<img src="bike3.jpg" class="cycle3">
<img src="bike4.jpg" class="cycle3">