1

我已经设置了一个我想在网页周围以多种方式使用的功能。

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

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

id 和 classes 的混合不是问题，我已经测试过了。问题似乎在于这个函数/循环......

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">
4

1 回答 1

1

您需要声明变量id、l和iwith ，var以便每次调用mh2()都会在这些变量上创建闭包。没有这个，它们就是全局变量，它们只包含上次调用mh2().

function mh2($id, $trigger, $speed) {
    var id = $($id),  l = id.length,  i = 0;
    ...
}

更正的小提琴

另请参阅：JavaScript 闭包如何工作？

于 2013-09-29T23:09:07.630 回答