Javascript “双”字；主动的；图像旋转木马中的类

我已经用HTML和PHP创建了一个图像旋转木马

图像转盘的工作原理如下：

此图像转盘由两个组件组成：主图像区域和缩略图区域（id=横幅鼠标覆盖区域）

横幅鼠标悬停区域由主图像的缩略图组成，仅当用户将鼠标悬停在主图像区域上时才会显示

当用户将鼠标移到特定缩略图图像上时，主图像区域的“活动”图像将更改为鼠标移到图像上

zoom_image（JS）函数用于识别鼠标在缩略图上的id，从而将主图像设置为“活动”

但是，有时在鼠标悬停在缩略图上之后，图像旋转木马似乎会同时出现两个“活动”类。因此，它在原始图像的正下方创建了第二个图像旋转木马。但一旦原始图像旋转木马自动滑动到队列中的下一个图像，第二个图像旋转木马将自动消失

我应该如何着手解决这个问题

提前谢谢

好吧，既然您使用的是Twitter引导，那么您很可能也在使用jQuery（至少，引导使用它），那么为什么不利用它呢

你可以这样做：

function zoom_image(img) {
    //Get the rel value of the image
    var div_id = '';
    var fullpath = img.attr("rel");
    var splitpath = fullpath.split("_&");
    var image_name = splitpath[0];
    var slide_id = splitpath[1];
    var new_slide_id = "slide_" + slide_id;
    $('#zoomImage').attr("src", image_name);

    $(".active.item").removeClass("active");
    $("#"+new_slide_id).addClass("active");
}

我尚未测试此代码，请尝试

======================编辑================

重新阅读代码后，您可以将其简化一点：

对于初学者，您可以在代码中使用data-*属性，这样就不必费劲地找到图像的id。如果您有：

<a onmouseover='return zoom_image($(this));' ...>

嗨，谢谢你的帮助。测试代码后，它仍然会在第一个图像转盘的正下方创建第二个图像转盘。我想，你必须对指示器做同样的事情。因为您还将其中一个设置为活动，并且您不会取消设置它
<a onmouseover='return zoom_image($(this));' data-image="<?php echo BANNER_PATH.'assets/landing_banner_images/'.$imageThumb['banner_path']; ?>" data-target="<?php echo 'slide_".$thumbnailCnt; ?>" ...>

function zoom_image(img) {
    var image_name = img.attr("data-image");
    var new_slide_id = img.attr("data-target");
    $('#zoomImage').attr("src", image_name);

    $(".active.item").removeClass("active");
    $("#"+new_slide_id).addClass("active");
}