Javascript jssor库缩略图图像悬停交换

我正在尝试建立一个jssor图像库，并让大多数东西都能正常工作，但我对jssor不是很精通，所以如果这是一个简单的添加，我很抱歉

我有用于导航的黑白缩略图，当图像处于活动状态或悬停在静态图像上时，显示在缩略图的上方，我想在悬停在或活动状态时为缩略图的彩色版本进行图像交换，但我不确定如何完成

资料来源：

t01.png是当前正在覆盖的图像

jQuery（文档）.ready（函数（$）{
变量_幻灯片切换=[
//放大
{$Duration:1200，$Zoom:1，$Easing:{$Zoom:$JssorEasing$.$EaseInCubic，$Opacity:$JssorEasing$.$EaseOutQuad}，$Opacity:2}，
//缩小
{$Duration:1000，$Zoom:11，$SlideOut:true，$Easing:{$Zoom:$JssorEasing$.$easeinfo，$Opacity:$JssorEasing$.$EaseLinear}，$Opacity:2}，
//旋转放大
{$Duration:1200，$Zoom:1，$Rotate:1，$Duration:{$Zoom:[0.2,0.8]，$Rotate:[0.2,0.8]}，$EaseSwing:{$Zoom:$jssoreaseasing$.$EaseSwing，$Opacity:$JssorEasing$.$easeslinear，$Rotate:$jssoreasesering$.$EaseSwing}，$2，$Round:{$Rotate:0.5}，
//旋转+缩小
{$Duration:1000，$Zoom:11，$Rotate:1，$SlideOut:true，$ease:{$Zoom:$JssorEasing$.$easeinfo，$Opacity:$JssorEasing$.$easeinlinear，$Rotate:$jssoreaseinfo$.$easeinfo}，$Opacity:2，$Round:{$Rotate:0.8}，
//放大
{$Duration:1200，x:0.5，$Cols:2，$Zoom:1，$Assembly:2049，$ChessMode:{$Column:15}，$ease:{$Left:$JssorEasing$.$EaseInCubic，$Zoom:$JssorEasing$.$EaseInCubic，$Opacity:$jssoreasering$.$EaseLinear}，$2}，
//将HDouble+缩小
{$Duration:1200，x:4，$Cols:2，$Zoom:11，$SlideOut:true，$Assembly:2049，$ChessMode:{$Column:15}，$easeinfo:{$Left:$JssorEasing$.$easeinfo，$Zoom:$JssorEasing$.$easeinfo，$jssoreaseinfo$.$EaseLinear}，$Opacity:2}，
//旋转放大L
{$Duration:1200，x:0.6，$Zoom:1，$Rotate:1，$Duration:{$Left:[0.2,0.8]，$Zoom:[0.2,0.8]，$Rotate:{$Left:$JssorEasing$.$EaseSwing，$Zoom:$JssorEasing$.$EaseSwing，$Opacity:$jssoreasesreasing$.$easeslinear，$Rotate:$jssoreaseswing.$EaseSwing.$EaseSwing，$easeslinear，$Rotate:$jssoreaseswing$.$EaseSwing.$EaseSwing}，
//旋转放大+缩小R
{$Duration:1000，x:-4，$Zoom:11，$Rotate:1，$SlideOut:true，$easeinfo:{$Left:$JssorEasing$.$easeinfo，$Zoom:$JssorEasing$.$easeinfo，$Opacity:$JssorEasing$.$easeinfo，$Rotate:$jssoreaseinfo$.$easeinfo，$2，$Round:{$Rotate:0.8}，
//旋转放大
{$Duration:1200，x:-0.6，$Zoom:1，$Rotate:1，$Duration:{$Left:[0.2,0.8]，$Zoom:[0.2,0.8]，$Rotate:{$Left:$JssorEasing$.$EaseSwing，$Zoom:$JssorEasing$.$EaseSwing，$不透明度：$jssoreaselease$.$EaseLinear，$Rotate:$jssoreaseswing$.$EaseSwing.$EaseSwing}，$Opacity:$jssoreaseswing$.$EaseSwing.$EaseSwing.$EaseSwing，
//旋转缩放+缩小L
{$Duration:1000，x:4，$Zoom:11，$Rotate:1，$SlideOut:true，$easeinfo:{$Left:$JssorEasing$.$easeinfo，$Zoom:$JssorEasing$.$easeinfo，$Opacity:$JssorEasing$.$easeinfo，$Rotate:$jssoreaseinfo$.$easeinfo，$2，$Round:{$Rotate:0.8}，
//旋转HDouble-in
{$Duration:1200，x:0.5，y:0.3，$Cols:2，$Zoom:1，$Rotate:1，$Assembly:2049，$ChessMode:{$Column:15}，$easeinubic:$JssorEasing$.$easeinubic，$Top:$jssoreaseinubic$.$easeinubic，$Zoom:$jssoreaseinublicing$.$easeinubic，$easoutquad，$Rotate:$jssoreaseinublicing$.$easeinubic}，$easeinubic，$2，$Round:{$Rotate:0.7}，
//旋转HDouble-out
{$Duration:1000，x:0.5，y:0.3，$Cols:2，$Zoom:1，$Rotate:1，$SlideOut:true，$Assembly:2049，$ChessMode:{$Column:15}，$easeinfo:{$Left:$JssorEasing$.easeinfo，$jssoreaseinfo$.easeinfo，$Zoom:$jssoreaseinfo$.easeinfo，$jssoreaseinfo${$Rotate:0.7}，
//旋转工件
{$Duration:1200，x:-4，y:2，$Rows:2，$Zoom:11，$Rotate:1，$Assembly:2049，$ChessMode:{$Row:28}，$easeincreating$。$EaseInCubic，$Top:$jssorreleasing$。$EaseInCubic，$Zoom:$jssorreleasing$。$EaseInCubic，$Opacity:$jssoreaseincreating$。$EaseOutQuad，$EaseInCubic}，$Rotate:$jssoreaseincreating$。$EaseInCubic}，$Opacity:2，$Round:$EaseInCubic:$，
//轮换工作
{$Duration:1200，x:1，y:2，$Cols:2，$Zoom:11，$Rotate:1，$Assembly:2049，$ChessMode:{$Column:19}，$easesoreasing$。$EaseInCubic，$Top:$JssorEasing$。$EaseInCubic，$Zoom:$JssorEasing$。$EaseInCubic，$不透明：$jssoreasoutquad$。$EaseInCubic}，$Rotate:$jssoreaseincreating$。$EaseInCubic}，$2，$Round:{$Rotate:0.8}
];
变量选项={
$AutoPlay:true，//[可选]是否自动播放，若要启用幻灯片放映，此选项必须设置为true，默认值为false
$AutoPlayInterval:2500，//[可选]自上一张幻灯片停止后转到下一张幻灯片的时间间隔（毫秒），如果滑块是自动播放的，默认值为3000
$PauseOnHover:3，//[可选]如果滑块自动播放，鼠标悬停时是否暂停，0不暂停，1桌面暂停，2触摸设备暂停，3桌面和触摸设备暂停，4桌面冻结，8触摸设备冻结，12桌面和触摸设备冻结，默认值为1
$DragOrientation:3，//[可选]拖动幻灯片的方向，0不拖动，1水平，2垂直，3任意，默认值为1（注意
<div>
    <img u="image" src="../../Images/Gallery/Engagement/image/Tall/_IMG_004.jpg" />
    <div u="thumb">
        <img class="thumb1" src="../../Images/Gallery/Engagement/thumb_BnW/Tall/_IMG_004.jpg" />
        <img class="thumb2" src="../../Images/Gallery/Engagement/thumb_CL/Tall/_IMG_004.jpg" />
    </div>
</div>

<!-- Thumbnail Item Skin Begin -->
<style>
    /* jssor slider thumbnail navigator skin 01 css */
    /*
    .jssort01 .p           (normal)
    .jssort01 .p:hover     (normal mouseover)
    .jssort01 .pav           (active)
    .jssort01 .pav:hover     (active mouseover)
    .jssort01 .pdn           (mousedown)
    */
    .jssort01 .p .thumb1 {
        display: block;
    }
    .jssort01 .p:hover .thumb1 {
        display: none;
    }
    .jssort01 .p .thumb2 {
        display: none;
    }
    .jssort01 .p:hover .thumb2 {
        display: block;
    }
</style>
<div u="slides" style="cursor: move;">
    <div u="prototype" class="p" style="position: absolute; width: 72px; height: 72px; top: 0; left: 0;">
        <div u="thumbnailtemplate" style="width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;"></div>
    </div>
</div>
<!-- Thumbnail Item Skin End -->