hbuilder制作轮播图，鼠标扫过旁边的标题才会换图片

您可以使用以下步骤使用HBuilder制作带有鼠标悬浮效果的轮播图：

1. 在HTML文件中添加一个容器元素，例如div标签，用于包含轮播图和标题。例如：

<div class="slider-container">
  <div class="slider">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
  <div class="slider-titles">
    <a href="#">Title 1</a>
    <a href="#">Title 2</a>
    <a href="#">Title 3</a>
  </div>
</div>

2. 在CSS文件中设置轮播图和标题的样式。例如：

.slider-container {
  position: relative;
  height: 400px;
  width: 600px;
}
.slider {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.slider img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.slider-titles {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}
.slider-titles a {
  display: inline-block;
  margin: 10px;
  font-size: 20px;
  color: #fff;
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.3s ease-in-out;
}
.slider-titles a:hover {
  opacity: 1;
}

3. 在JavaScript文件中设置轮播图的切换效果和标题的鼠标悬浮效果。例如：

$(document).ready(function() {
  var sliderIndex = 0;
  var sliderInterval = setInterval(changeSlider, 5000);
  
  function changeSlider() {
    var sliders = $('.slider img');
    var titles = $('.slider-titles a');
    sliders.eq(sliderIndex).fadeOut(1000);
    titles.eq(sliderIndex).removeClass('active');
    sliderIndex = (sliderIndex + 1) % sliders.length;
    sliders.eq(sliderIndex).fadeIn(1000);
    titles.eq(sliderIndex).addClass('active');
  }
  
  $('.slider-titles a').hover(function() {
    var index = $(this).index();
    if (index != sliderIndex) {
      $('.slider img').eq(sliderIndex).stop().fadeOut(1000);
      $('.slider img').eq(index).stop().fadeIn(1000);
      $('.slider-titles a').eq(sliderIndex).removeClass('active');
      $('.slider-titles a').eq(index).addClass('active');
      sliderIndex = index;
    }
  });
});

这些代码将会创建一个具有鼠标悬浮效果的轮播图。当鼠标悬停在标题上时，轮播图将切换到对应的图片。当鼠标离开标题时，轮播图将恢复自动切换。