0 
<script type="text/javascript"> 
    var interval; 
    $('#105').mouseover(function()
    { mouseOver('105'); });
    $('#105').mouseout(function()
    { mouseOut('105') ;});
    function mouseOver(videoId) 
    {   var num = 2;
        interval = setInterval(function() 
        { $('#'+videoId).attr('src', '../thumbs/268255615/268255615.'+num+'.jpg');
        if(num == 12)
        { num = 1; }
        else
        { num++; }},500);   }
    function mouseOut (videoId)
    { clearInterval(interval); $('#'+videoId).attr('src', '../thumbs/268255615/268255615.1.jpg'); } 
</script>


<script type="text/javascript"> 
    var interval; 
    $('#104').mouseover(function()
    { mouseOver('104'); });
    $('#104').mouseout(function()
    { mouseOut('104') ;});
    function mouseOver(videoId) 
    {   var num = 2;
        interval = setInterval(function() 
        { $('#'+videoId).attr('src', '../thumbs/325082397/325082397.'+num+'.jpg');
        if(num == 12)
        { num = 1; }
        else
        { num++; }},500);   }
    function mouseOut (videoId)
    { clearInterval(interval); $('#'+videoId).attr('src', '../thumbs/325082397/325082397.1.jpg'); } 
</script>

上面的代码是一个 JavaScript 图像旋转器。代码的问题是最后一个图像路径总是覆盖它之前的图像路径。

例如，如果图像path one = thumbs/imagea.jpg和path two = thumbs/imageb.jpg路径一（“thumbs/imagea.jpg”）则在悬停时变为路径二变为（“thumbs/imageb.jpg”）

该脚本曾一度试图找出问题所在或改变了任何想法？

4

1 回答 1

0

这很明显：您将 mouseOver 重新定义为一个函数。第二次定义它时，它会覆盖第一个函数。这是因为 mouseOver 是在窗口范围内定义的。将它分成两个块并不会改变这一点。另请注意，“间隔”也被定义了两次，因此这里也会发生名称冲突。

一种解决方案是使用闭包，更改任一函数的名称或将两个函数合并为一个。

通过将每个脚本包装在以下块中来完成闭包：

(function() {
  // your script here
}());

合并的函数将是：

var i, setupImage, images;
images = [
    { "id" : "#104", "prefix" : "../thumbs/325082397/325082397." },
    { "id" : "#105", "prefix" : "../thumbs/268255615/268255615." }
];

setupImage = function (image) {
    'use strict';
    var interval;
    $(image.id).mouseover(function () {
        var num = 2;
        interval = setInterval(function () {
            $(image.id).attr('src', image.prefix + num + '.jpg');
            if (num === 12) {
                num = 1;
            } else {
                num += 1;
            }
        }, 500);
    });
    $(image.id).mouseout(function () {
        $(image.id).mouseout(function () {
            clearInterval(interval);
            $(image.id).attr('src', image.prefix + '1.jpg');
        });
    });
};

for (i = 0; i < images.length; i += 1) {
    setupImage(images[i]);
}
于 2013-08-03T09:01:19.890 回答