javascript - 图像轮播 onmouseover data-slide-to

Question

我有一个使用 HTML 和 PHP 编写的图像轮播。 该图像轮播由两部分组成 - 主轮播 (bigImgCarousel) 和缩略图 (mCustomScrollbar)。

名为“mCustomScrollbar”的缩略图部分显示轮播中图像的缩略图。当用户单击缩略图时，主轮播将滑动到单击的图像。

<li data-target="#carouselCustom" data-slide-to="<?php echo $thumbnailCnt; ?>" class="<?php if($thumbnailCnt == 0) { echo 'active'; } ?>">
   <img class="img-responsive" src="<?php echo BANNER_PATH.'assets/landing_banner_images/'.$imageThumb['banner_path']; ?>" width="160px" onmouseover="bannerPreview()" />
</li>

如何将缩略图操作的点击更改为“onmouseover”，以便当用户将鼠标悬停在特定缩略图上时，主轮播将滑动到该图像。

$thumbnailCnt 指的是轮播中特定图像的幻灯片编号。

data-slide-to="<?php echo $thumbnailCnt; ?>"

<div id='carouselCustom' class='carousel slide' data-ride='carousel'>
  <div class='carousel-outer'>

    <!-- Wrapper for slides -->
    <div class='carousel-inner'>
      <?php $bannerCnt=1; foreach($images as $image) { ?>
      <div id="bigImgCarousel" class="<?php if($bannerCnt == 1) { echo 'active'; } ?> item">
        <a href="<?php echo $image['url']; ?>">
          <img class="img-responsive" src="<?php echo BANNER_PATH.'assets/landing_banner_images/'.$image['banner_path']; ?>" height="585px" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat" onmouseover="bannerPreview()" onmouseout="bannerOffPreview()"/>
        </a>
      </div>
      <?php $bannerCnt++; } ?>

      <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-target="#carouselCustom" data-slide-to="<?php echo $thumbnailCnt; ?>" class="<?php if($thumbnailCnt == 0) { echo 'active'; } ?>">
              <img class="img-responsive" src="<?php echo BANNER_PATH.'assets/landing_banner_images/'.$imageThumb['banner_path']; ?>" width="160px" onmouseover="bannerPreview()" />
            </li>
          <?php $thumbnailCnt++; } ?>
        </ol>
      </div>
    </div>
  </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>

提前致谢。

Answer 1

您可以将数据属性名称更改为不同的名称，并更改 JavaScript 中的幻灯片，如下所示:

您的 PHP:

<li data-target="#carouselCustom" data-change-to="<?php echo $thumbnailCnt; ?>" class="<?php if($thumbnailCnt == 0) { echo 'active'; } ?>">
  <img class="img-responsive" src="<?php echo BANNER_PATH.'assets/landing_banner_images/'.$imageThumb['banner_path']; ?>" width="160px" onmouseover="bannerPreview()" />
</li>

JS:

var changeTo;

$('#carouselCustom .carousel-indicators > [data-target="#carouselCustom"]').mouseover(function() {
  changeTo = parseInt($(this).attr('data-change-to'), 10);
  $('#carouselCustom').carousel(changeTo);
});

当您将鼠标悬停在几个缩略图上时，您还可以通过更改 slid 和 slide 事件上的指针事件 CSS 属性来防止连续更改幻灯片:

$('#carouselCustom').on('slide.bs.carousel', function() {
  $('#carouselCustom .carousel-indicators > [data-target="#carouselCustom"]').css('pointer-events', 'none')
});

$('#carouselCustom').on('slid.bs.carousel', function() {
  $('#carouselCustom .carousel-indicators > [data-target="#carouselCustom"]').css('pointer-events', 'auto')
});

如果您想支持触摸设备，您可以在 JavaScript 中使用触摸事件，例如 touchend。