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

我正在尝试重新创建我在此网站上看到的幻灯片/旋转木马效果（向下滚动到英雄横幅旁）：

我认为旋转木马的背景在物品悬停时会发生变化，这看起来很棒。这就是我取得的成绩：

看看KTM示例，我觉得它太复杂了，可能是某个框架的一部分？所以我尽量简化它

我不认为我的例子就在百万英里之外，但它需要一些改进。我遇到的主要问题是当这3个项目悬停在上方时，确保图像淡入/淡出，而不是立即更改。使用我正在使用的方法，使用

data-*

属性更新

img src=“”

，这是否可行

我试着加入

.fadeIn

和

.delay

，但似乎没有任何效果

我遇到的另一个问题是，当鼠标悬停在文本似乎闪烁的项目上后，将鼠标从旋转木马中移除。这看起来好像是因为img不透明度的改变，当我删除它时，它不会发生-但我还没有得到底部，所以任何指针将非常感谢

谢谢

$（“.carousel\uu item”）.hover（函数（）{//将.image holder的img src更改为.list a的data属性中定义的src。
var值=$（this.attr（'data-src'）；
美元（“.carousel_uubg img”）.attr（“src”，值）；
});
.carousel{
背景：#222；
边框：1px纯白；
保证金：0自动；
溢出：隐藏；
位置：相对位置；
宽度：100%；
最大宽度：1200px；
}
.carousel_uubg{
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
}
.carousel_uubg img{
-o-对象配合：盖；
对象匹配：覆盖；
身高：100%；
宽度：100%；
}
.旋转木马项目{
边框：1px纯白；
框大小：边框框；
浮动：左；
位置：相对位置；
宽度：33.33333%；
}
.carousel__内容{
框大小：边框框；
颜色：#fff；
身高：100%；
填充：15px；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
-webkit背面可见性：隐藏；
}
.旋转木马标题{
过渡：全部为0.25秒；
-webkit背面可见性：隐藏；
}
.carousel__副标题{
显示：无；
-webkit背面可见性：隐藏；
}
.carousel_uubtn{
背景：#fff；
颜色：#222；
显示：块；
不透明度：0；
位置：绝对位置；
填充：15px 30px；
底部：15px；
左：15px；
右：15px；
文本对齐：居中；
文字装饰：无；
过渡：全部为0.25秒；
-webkit背面可见性：隐藏；
}
.carousel__图像{
显示：块；
不透明度：1；
过渡：全部为0.25秒；
宽度：100%；
最大宽度：100%；
-webkit背面可见性：隐藏；
}
.carousel:hover.carousel_uu标题{
不透明度：.25；
}
.carousel:hover.carousel__图像{
不透明度：0；
}
.carousel:hover.carousel\u项目：hover.carousel\u标题{
不透明度：1；
}
.carousel:hover.carousel\u项目：hover.carousel\u标志{
显示：无；
}
.旋转木马：悬停。旋转木马项目：悬停。旋转木马字幕{
显示：块；
}
.carousel:hover.carousel\u项目：hover.carousel\u btn{
不透明度：1；
}

产品名称#1
作为特色的
较长的、朗朗上口的、有影响力的陈述
产品名称#2
作为特色的
较长的、朗朗上口的、有影响力的陈述
产品名称#3
作为特色的
较长的、朗朗上口的、有影响力的陈述
使用
style=“display:none”
创建这些图像，而不是替换图像源。然后您可以使用jquery
$（“.carousel\uu item”）.hover（showImage，hideImage）
来实现您的目标

$（image）.show（）
和
$（image）.hide（）
应该足够满足您的需要了
这样做的问题是您加载了大量不需要的图像吗？旋转木马中可能有7或8个图像，这就是为什么我认为交换src最好的原因，这样可以保持匹配更干净。否则页面将加载大量大图像？如果效果更好，我可以使用
背景图像
，甚至可以重新加载整个
img
，而不仅仅是src-这可能有助于添加淡入淡出？如果您希望用户浏览旋转木马，预加载映像会更好，因为映像已加载下载，而不是悬停下载。如果映像非常大或您担心网络使用费，你可能需要做一些优化，我认为在需要的时候最好在hover上加载图像，否则如果用户不需要内容，它可能会减慢页面速度。所以，也许悬停时图像已加载，然后在准备就绪时淡入？我还在继续玩弄它，但什么都没有。谢谢你的所有意见！：）