Question

我有一个使用HTML和PHP编写的图像轮播。这个图像轮播由两部分组成 - 主旋转木马（bigImgCarousel）和缩略图（mCustomScrollbar）。

缩略图部分名为＆＃34; mCustomScrollbar＆＃34;显示旋转木马中图像的缩略图。当用户点击缩略图时，主旋转木马将滑动到点击的图像。

<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>

如何将缩略图操作的点击更改为＆＃34; onmouseover＆＃34;，这样当用户将鼠标悬停在特定缩略图上时，主旋转木马将滑动到该图像。

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

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

＆＃13;

<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>

＆＃13;

左右按钮导航到下一张和上一张图像。

<!-- 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。

图像轮播onmouseover数据滑动到

1 个答案: