Javascript 图像传送带onmouseover数据幻灯片

我有一个使用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>

项目“>
您可以将数据属性名称更改为其他名称，并在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>

通过更改
slided
和
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
它对你现在拥有的设备做了什么或没有做什么？也让我们看看你的js，点击版本。changeTo=parseInt（$（this）.attr（'data-change-to'），10）；返回NaNDid您是否将HTML属性更改为数据更改为？我测试了此解决方案，它成功了。是的，我已将其更改为数据更改为Hanks makshh，刚刚测试它正在工作。但是，我意识到，在进行了您建议的更改后，我无法按下左右键，我必须导航到下一个和上一个ious图像。此错误显示为“bootstrap.js:441 Uncaught TypeError:无法读取未定义的属性'offsetWidth'，请从上面的问题中查看。我已更新了答案，将
$（'[data target=“#carouselCustom']）
更改为
$（'#carouselCustom.carouselindicators>[data target=“#carouselCustom“]”）
var changeTo;

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

$('#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')
});