图像旋转木马的数据扫描

Question

我有一个使用HTML和PHP编写的图像旋转木马。此图像旋转木制由2个部分组成 - 主旋转木马（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事件上的Pointer Events 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')
});

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