Question

我正在尝试重新创建我在此网站上看到的幻灯片放映/旋转木马效果（向下滚动过英雄横幅）：https://www.ktm.com

我认为，一旦将鼠标悬停在某个项目上，轮播的背景就会变好。这是我所走的路：

看一下KTM的例子，对我来说似乎太复杂了，也许是某些框架的一部分？因此，我尽力简化了这一过程。

我不认为我的示例在百万英里之外，但需要进行一些改进。我遇到的主要问题是将3个项目悬停在上方时，请确保图像淡入/淡出而不是立即更改。使用我所使用的方法并使用img src=""属性更新data-*的方法是否有可能？

我尝试添加.fadeIn和.delay，但似乎没有任何作用。

我遇到的另一个问题是，当您将鼠标悬停在轮播上时，将鼠标移到项目上时，文本似乎会闪烁。看起来这与img不透明度的变化有关，因为当我删除它时，它不会发生-但是我还没有深入到此，因此任何指针都将不胜感激。

谢谢！

$(".carousel__item").hover(function() { // Changes the .image-holder's img src to the src defined in .list a's data attribute.
  var value = $(this).attr('data-src');
  $(".carousel__bg img").attr("src", value);
});

.carousel {
  background: #222;
  border: 1px solid white;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 1200px;
}

.carousel__bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.carousel__bg img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  width: 100%;
}

.carousel__item {
  border: 1px solid white;
  box-sizing: border-box;
  float: left;
  position: relative;
  width: 33.33333%;
}

.carousel__content {
  box-sizing: border-box;
  color: #fff;
  height: 100%;
  padding: 15px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-backface-visibility: hidden;
}

.carousel__title {
  transition: all .25s;
  -webkit-backface-visibility: hidden;
}

.carousel__subtitle {
  display: none;
  -webkit-backface-visibility: hidden;
}

.carousel__btn {
  background: #fff;
  color: #222;
  display: block;
  opacity: 0;
  position: absolute;
  padding: 15px 30px;
  bottom: 15px;
  left: 15px;
  right: 15px;
  text-align: center;
  text-decoration: none;
  transition: all .25s;
  -webkit-backface-visibility: hidden;
}

.carousel__image {
  display: block;
  opacity: 1;
  transition: all .25s;
  width: 100%;
  max-width: 100%;
  -webkit-backface-visibility: hidden;
}

.carousel:hover .carousel__title {
  opacity: .25;
}

.carousel:hover .carousel__image {
  opacity: 0;
}

.carousel:hover .carousel__item:hover .carousel__title {
  opacity: 1;
}

.carousel:hover .carousel__item:hover .carousel__flag {
  display: none;
}

.carousel:hover .carousel__item:hover .carousel__subtitle {
  display: block;
}

.carousel:hover .carousel__item:hover .carousel__btn {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel">
  <div class="carousel__bg">
    <img src="https://fillmurray.com/800/300">
  </div>
  <div class="carousel__item" data-src="https://fillmurray.com/800/500">
    <div class="carousel__content">
      <h2 class="carousel__title">Product Name #1</h2>
      <span class="carousel__flag">Featured</span>
      <h2 class="carousel__subtitle">Longer, catchy, impactful statement</h2>
      <a href="#" class="carousel__btn">Find Out More</a>
    </div>
    <img src="https://fillmurray.com/250/400" class="carousel__image" />
  </div>
  <div class="carousel__item" data-src="https://fillmurray.com/800/400">
    <div class="carousel__content">
      <h2 class="carousel__title">Product Name #2</h2>
      <span class="carousel__flag">Featured</span>
      <h2 class="carousel__subtitle">Longer, catchy, impactful statement</h2>
      <a href="#" class="carousel__btn">Find Out More</a>
    </div>
    <img src="https://fillmurray.com/250/400" class="carousel__image" />
  </div>
  <div class="carousel__item" data-src="https://fillmurray.com/800/300">
    <div class="carousel__content">
      <h2 class="carousel__title">Product Name #3</h2>
      <span class="carousel__flag">Featured</span>
      <h2 class="carousel__subtitle">Longer, catchy, impactful statement</h2>
      <a href="#" class="carousel__btn">Find Out More</a>
    </div>
    <img src="https://fillmurray.com/250/400" class="carousel__image" />
  </div>
</div>

Answer 1

使用style="display: none"创建这些图像，而不是替换图像源。然后，您可以使用jquery $(".carousel__item").hover( showImage, hideImage )实现您的目标。

$(image).show()和$(image).hide()应该足以满足您的需求

使用数据属性将鼠标悬停在链接上时，更改（和淡入/淡出）图像

1 个答案: