图像轮播中的双“活动”类

Posted 2023-03-06

【中文标题】图像轮播中的双“活动”类

【英文标题】：Double "active" class in image carousel

【发布时间】：2017-05-24 18:41:13

【问题描述】：

我使用 html 和 php 创建了一个图像轮播。

图片轮播的工作原理如下：

此图像轮播由两部分组成：主图像区域和缩略图区域（id = 横幅鼠标悬停区域）。 banner-mouseover-area 由主图像的缩略图组成，只有当用户将鼠标悬停在主图像区域上时才会出现。 当用户将鼠标悬停在特定缩略图上时，主图像区域的“活动”图像将更改为鼠标悬停图像。 zoom_image (JS) 函数用于识别鼠标悬停缩略图图像的id，从而将主图像设置为“活动”。

但是，有时在将鼠标悬停在缩略图上之后，图像轮播似乎会同时发生 2 个“活动”类。因此，它在原始图像的正下方创建了第二个图像轮播。但是一旦原图轮播自动滑到队列中的下一张图片，第二张图片轮播就会自动消失。

我应该如何解决这个问题？

提前致谢。

<div id='carouselCustom' class='carousel slide' data-ride='carousel'>
  <div class='carousel-outer'>
    <!-- Wrapper for slides -->
    <div class='carousel-inner'>
      <?php $bannerCnt=1; $bannerCnt2=0; foreach($images as $image)  ?>
      <div id="<?php echo 'slide_'.$bannerCnt2; ?>" class="<?php if($bannerCnt == 1)  echo 'active';  ?> item">
        <a id="imagezoom" href="<?php echo $image['url']; ?>">
                                        <img id="zoomImage" class="img-responsive" src="<?php echo BANNER_PATH.'assets/landing_banner_images/'.$image['banner_path']; ?>"  data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat" onmouseover="bannerPreview()" onmouseout="bannerOffPreview()"/>
                                    </a>
      </div>
      <?php $bannerCnt++; $bannerCnt2++;  ?>

      <div id='banner-mouseover-area' style="position: absolute;bottom: 0px; display: none;">
        <!-- Indicators -->
        <ol class='carousel-indicators mCustomScrollbar'>
          <?php $thumbnailCnt=0; foreach($images as $imageThumb)  ?>
          <li data-transition="flip" data-target="#carouselCustom" data-change-to="<?php echo $thumbnailCnt; ?>" class="<?php if($thumbnailCnt == 0)  echo 'active';  ?>">
            <a onmouseover='return zoom_image($(this));' rel="<?php echo BANNER_PATH.'assets/landing_banner_images/'.$imageThumb['banner_path'].'_&'.$thumbnailCnt; ?>" href="<?php echo $imageThumb['url']; ?>">
                                                <img class="img-responsive" src="<?php echo BANNER_PATH.'assets/landing_banner_images/'.$imageThumb['banner_path']; ?>"  onmouseover="bannerPreview()" />
                                            </a>
          </li>
          <?php $thumbnailCnt++;  ?>
        </ol>
      </div>
    </div>

    <!-- Controls -->
    <!-- Left -->
    <div id="leftControl" style="position: absolute; margin-top: -20px; left: 20px;" class="tp-leftarrow tparrows default round" data-target="#carouselCustom" data-slide='prev'>
      <div class="tp-arr-allwrapper">
        <div class="tp-arr-iwrapper">
          <div class="tp-arr-imgholder" style="visibility: inherit; opacity: 1; background-image: url(&quot;undefined&quot;);"></div>
          <div class="tp-arr-imgholder2"></div>
          <div class="tp-arr-titleholder"></div>
          <div class="tp-arr-subtitleholder"></div>
        </div>
      </div>
    </div>

    <!-- Right -->
    <div id="rightControl" style="position: absolute; margin-top: -20px; right: 20px;" class="tp-rightarrow tparrows default round" data-target="#carouselCustom" data-slide='next'>
      <div class="tp-arr-allwrapper">
        <div class="tp-arr-iwrapper">
          <div class="tp-arr-imgholder" style="visibility: inherit; opacity: 1; background-image: url(&quot;undefined&quot;);"></div>
          <div class="tp-arr-imgholder2"></div>
          <div class="tp-arr-titleholder"></div>
          <div class="tp-arr-subtitleholder"></div>
        </div>
      </div>
    </div>

  </div>
</div>

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;
  document.getElementById('zoomImage').src = image_name;

  var currentSlide = document.getElementsByClassName('active item')[0].id;

  console.log(new_slide_id);
  //For loop to remove class and add class to the selected image
  for (i = 0; i < imagesCount; i++) 
    div_id = "slide_" + i;
    if (div_id !== new_slide_id) 
      //Remove all active class from the div
      var removeB = document.getElementById(div_id);
      removeB.className = "";
      removeB.className = "item";
     else 
      //Add active class to the div
      var mouseoverSlide = document.getElementById(new_slide_id);
      mouseoverSlide.className = "";
      mouseoverSlide.className = "item active";
    
  

【参考方案1】：

好吧，既然您正在使用 Twitter Bootstrap，那么您很可能也在使用 jQuery（至少，Bootstrap 使用它），那么为什么不利用它来发挥自己的优势呢？

你可以这样做：

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");

【讨论】：

您好，感谢您的帮助。测试了代码，它仍然在第一个图像的正下方创建了第二个图像轮播。

嗯。我猜你必须对指标做同样的事情。因为您还将其中一个设置为活动状态，并且您没有取消设置