我正在尝试重新创建我在此网站上看到的幻灯片/轮播效果(向下滚动到英雄横幅上(： https://www.ktm.com
我认为将鼠标悬停在项目上方后轮播的背景变化看起来很棒。这就是我所走多远的程度：
https://codepen.io/moy/pen/QVvMxo
查看 KTM 示例对我来说似乎过于复杂，也许是某个框架的一部分？所以我试图尽可能地简化它。
我不认为我的例子在一百万英里之外，但它需要一些改进。我遇到的主要问题是当将鼠标悬停在 3 个项目上时，确保图像淡入/淡出而不是立即更改。使用我使用的方法，使用data-*属性更新img src=""，这是否可行？
我尝试添加.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>使用style="display: none"创建这些图像，而不是替换图像源。然后你可以使用 jquery$(".carousel__item").hover( showImage, hideImage )来实现你的目标。
$(image).show()和$(image).hide()应该足以满足您想要的需求