为什么所有图像都更改为第一个输入

Why are all images be changed to the first input

本文关键字：第一个 输入 图像 为什么      更新时间：2023-09-26
<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并且如果路径一("thumbs/imagea.jpg"(path two = thumbs/imageb.jpg则在悬停时变为路径二("thumbs/imageb.jpg"(

这个脚本一度试图找出哪里出了问题或改变了任何想法？

这很明显：你正在将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]);
}
相关文章：