Javascript 悬停时显示元素并暂停自动播放

感谢您花时间研究这个问题！我有这个问题，我有四个图像，自动播放一次只显示一个，需要执行以下操作：

• 当鼠标悬停在箭头上时，当前自动播放图像应隐藏并显示悬停箭头的图像（例如，如果自动播放刚刚开始显示顶部图像，而我将底部箭头悬停，则顶部的图像应隐藏并显示我正在悬停的图像），当鼠标退出时，它应该隐藏它，继续自动播放

我尝试了很多不同的东西，但还是达不到效果

代码如下所示：

HTML

<div id="controllers">
                    <img class="images" id="topFeature" src="images/topFeature.png" alt="" title="">
                    <div id="topArrow"></div>
                    <img class="images" id="rightFeature" src="images/rightFeature.png" alt="" title="">
                    <div id="rightArrow"></div>
                    <img class="images" id="bottomFeature" src="images/bottomFeature.png" alt="" title="">
                    <div id="bottomArrow"></div>
                    <img class="images" id="leftFeature" src="images/leftFeature.png" alt="" title="">
                    <div id="leftArrow"></div>
                </div>

Javascript

$(document).ready(function(){
var images = $('.images');
var current = 0;

images.hide();

Slider();

function Slider(){
    $(images[current]).fadeIn('slow').delay(3000).fadeOut('slow');

    switch(current){
        case 0: $('#topArrow').attr('id', 'topArrowEffect').delay(3800).queue(function(){
            $(this).attr('id', 'topArrow');
            $(this).dequeue();
        });
                break;

        case 1: $('#rightArrow').attr('id', 'rightArrowEffect').delay(3800).queue(function(){
            $(this).attr('id', 'rightArrow');
            $(this).dequeue();
        });
                break;

        case 2: $('#bottomArrow').attr('id', 'bottomArrowEffect').delay(3800).queue(function(){
            $(this).attr('id', 'bottomArrow');
            $(this).dequeue();
        });
                break;

        case 3: $('#leftArrow').attr('id', 'leftArrowEffect').delay(3800).queue(function(){
            $(this).attr('id', 'leftArrow');
            $(this).dequeue();
        });
                break;
    }

    $(images[current]).queue(function(){
        current = current < images.length - 1 ? current + 1 : 0;
        Slider();
        $(this).dequeue();
    });
}

    $( "#bottomArrow" ).mouseenter(function(){
    $( "#bottomArrow" ).attr('id', 'bottomArrowEffect');
    images[current].hide();
}).mouseleave(function(){
    $( "#bottomArrow" ).attr('id', 'bottomArrowEffect');
    images[current].show();
});


});

$（文档）.ready（函数（）{
var images=$（'.images'）；
无功电流=0；
image.hide（）；
滑块（）；
函数滑块（）{
$（图像[当前]）.fadeIn（'slow'）.delay（3000）.fadeOut（'slow'）；
开关（电流）{
案例0:$（'topArrow'）.attr（'id'，'topArrowEffect'）.delay（3800）.队列（函数（）{
$（this.attr（'id'，'topArrow'）；
$（this.dequeue（）；
});
打破
案例1:$（'#rightArrow'）.attr（'id'，'rightArrowEffect'）.delay（3800）.队列（函数（）{
$（this.attr（'id'，'rightArrow'）；
$（this.dequeue（）；
});
打破
案例2：$（'bottomArrow'）.attr（'id'，'bottomArrowEffect'）.delay（3800）.队列（函数（）{
$（this.attr（'id'，'bottomArrow'）；
$（this.dequeue（）；
});
打破
案例3:$（'#leftArrow'）.attr（'id'，'leftArrowEffect'）.delay（3800）.队列（函数（）{
$（this.attr（'id'，'leftArrow'）；
$（this.dequeue（）；
});
打破
}
$（图像[当前]）.queue（函数（）{
电流=电流<图像长度-1？电流+1:0；
滑块（）；
$（this.dequeue（）；
});
}
$（“#底部箭头”）.mouseenter（函数（）{
$（“#bottomArrow”）.attr（'id'，'bottomArrowEffect'）；
图像[当前].hide（）；
}).mouseleave（函数（）{
$（“#bottomArrow”）.attr（'id'，'bottomArrowEffect'）；
图像[当前].show（）；
});
});

现场示例如下：

我的问题是，我无法达到效果，我用底部箭头做了一个示例，它只显示为悬停，但不隐藏和显示图像，我尝试了许多不同的方法，但仍然不能很好地工作

编辑1:

在这里，我尝试了另一个右箭头悬停的代码，但仍然不起作用：

        $(document).ready(function(){
    var images = $('.images');
    var current = 0;

    images.hide();

    Slider();

    function Slider(){
        $(images[current]).fadeIn('slow').delay(3000).fadeOut('slow');

        switch(current){
            case 0: $('#topArrow').attr('id', 'topArrowEffect').delay(3800).queue(function(){
                $(this).attr('id', 'topArrow');
                $(this).dequeue();
            });
                    break;

            case 1: $('#rightArrow').attr('id', 'rightArrowEffect').delay(3800).queue(function(){
                $(this).attr('id', 'rightArrow');
                $(this).dequeue();
            });
                    break;

            case 2: $('#bottomArrow').attr('id', 'bottomArrowEffect').delay(3800).queue(function(){
                $(this).attr('id', 'bottomArrow');
                $(this).dequeue();
            });
                    break;

            case 3: $('#leftArrow').attr('id', 'leftArrowEffect').delay(3800).queue(function(){
                $(this).attr('id', 'leftArrow');
                $(this).dequeue();
            });
                    break;
        }       

        $(images[current]).queue(function(){
            current = current < images.length - 1 ? current + 1 : 0;
            if(active = true)
                Slider();
            $(this).dequeue();
        });
    }

    function nonSlider(){
        $(images[current]).hide();

        switch(current){
            case 0: $('#topArrow').attr('id', 'topArrowEffect').delay(3800).queue(function(){
                $(this).attr('id', 'topArrow');
                $(this).dequeue();
            });
                    break;

            case 1: $('#bottomArrow').attr('id', 'bottomArrowEffect').delay(3800).queue(function(){
                $(this).attr('id', 'bottomArrow');
                $(this).dequeue();
            });
                    break;

                    break;

            case 3: $('#leftArrow').attr('id', 'leftArrowEffect').delay(3800).queue(function(){
                $(this).attr('id', 'leftArrow');
                $(this).dequeue();
            });
                    break;
        }       

        $(images[current]).queue(function(){
            current = current < images.length - 1 ? current + 1 : 0;
            nonSlider();
            $(this).dequeue();
        });
    }


    $("#rightArrow").on("hover", function(){
        $(this).attr('id', 'rightArrowEffect');
        active = false;
        nonSlider();
        $(images[1]).show();
    }).mouseout(function(){
        $(this).attr('id', 'rightArrow');
        active = false;
        Slider();
    });

});

$（文档）.ready（函数（）{
var images=$（'.images'）；
无功电流=0；
image.hide（）；
滑块（）；
函数滑块（）{
$（图像[当前]）.fadeIn（'slow'）.delay（3000）.fadeOut（'slow'）；
开关（电流）{
案例0:$（'topArrow'）.attr（'id'，'topArrowEffect'）.delay（3800）.队列（函数（）{
$（this.attr（'id'，'topArrow'）；
$（this.dequeue（）；
});
打破
案例1:$（'#rightArrow'）.attr（'id'，'rightArrowEffect'）.delay（3800）.队列（函数（）{
$（this.attr（'id'，'rightArrow'）；
$（this.dequeue（）；
});
打破
案例2：$（'bottomArrow'）.attr（'id'，'bottomArrowEffect'）.delay（3800）.队列（函数（）{
$（this.attr（'id'，'bottomArrow'）；
$（this.dequeue（）；
});
打破
案例3:$（'#leftArrow'）.attr（'id'，'leftArrowEffect'）.delay（3800）.队列（函数（）{
$（this.attr（'id'，'leftArrow'）；
$（this.dequeue（）；
});
打破
}       
$（图像[当前]）.queue（函数（）{
电流=电流<图像长度-1？电流+1:0；
如果（活动=真）
滑块（）；
$（this.dequeue（）；
});
}
函数非滑动（）{
$（图像[当前]）.hide（）；
开关（电流）{
案例0:$（'topArrow'）.attr（'id'，'topArrowEffect'）.delay（3800）.队列（函数（）{
$（this.attr（'id'，'topArrow'）；
$（this.dequeue（）；
});
打破
案例1:$（'bottomArrow'）.attr（'id'，'bottomArrowEffect'）.delay（3800）.队列（函数（）{
$（this.attr（'id'，'bottomArrow'）；
$（this.dequeue（）；
});
打破
打破
案例3:$（'#leftArrow'）.attr（'id'，'leftArrowEffect'）.delay（3800）.队列（函数（）{
$（this.attr（'id'，'leftArrow'）；
$（this.dequeue（）；
});
打破
}       
$（图像[当前]）.queue（函数（）{
电流=电流<图像长度-1？电流+1:0；
非滑动（）；
$（this.dequeue（）；
});
}
$（“#rightArrow”）。在（“悬停”，函数（）上{
$（this.attr（'id'，'rightArrowEffect'）；
主动=假；
非滑动（）；
$（图像[1]）.show（）；
}).mouseout（函数（）{
$（this.attr（'id'，'rightArrow'）；
主动=假；
滑块（）；
});
});

编辑2

$(document).ready(function(){
                var images = $('.images');
                var current = 0;
                var hovered = false;

                images.hide();

                Slider();

                $('.arrow').each(function () {
                    $(this).on('hover', function () {
                        hovered = true;

                        images[current].dequeue().fadeOut(200);

                        var classes = $(this).attr("class").split(/\s/);
                        var selectedImage = $('#'+classes[1]+'Feature');

                        selectedImage.stop().fadeIn(300);

                        console.log(selectedImage);
                    });
                });


                function Slider(){
                    $(images[current]).fadeIn('slow').delay(3000).fadeOut('slow');

                    switch(current){
                        case 0: $('#topArrow').attr('id', 'topArrowEffect').delay(3800).queue(function(){
                            $(this).attr('id', 'topArrow');
                            $(this).dequeue();
                        });
                                break;

                        case 1: $('#rightArrow').attr('id', 'rightArrowEffect').delay(3800).queue(function(){
                            $(this).attr('id', 'rightArrow');
                            $(this).dequeue();
                        });
                                break;

                        case 2: $('#bottomArrow').attr('id', 'bottomArrowEffect').delay(3800).queue(function(){
                            $(this).attr('id', 'bottomArrow');
                            $(this).dequeue();
                        });
                                break;

                        case 3: $('#leftArrow').attr('id', 'leftArrowEffect').delay(3800).queue(function(){
                            $(this).attr('id', 'leftArrow');
                            $(this).dequeue();
                        });
                                break;
                    }       

                    $(images[current]).queue(function(){
                        current = current < images.length - 1 ? current + 1 : 0;
                        if(!hovered)
                            Slider();
                        $(this).dequeue();
                    });
                }
            });

$（文档）.ready（函数（）{
var images=$（'.images'）；
无功电流=0；
var悬停=假；
image.hide（）；
滑块（）；
$（'.arrow'）。每个（函数（）{
$（this）.on（'hover'，函数（）{
悬停=正确；
图像[当前].dequeue（）.fadeOut（200）；
var classes=$（this.attr（“class”）.split（/\s/）；
var selectedImage=$（“#”+类[1]+“特征”）；
选择edimage.stop（）.fadeIn（300）；
console.log（选择图像）；
})
$(document).ready(function(){
                var images = $('.images');
                var current = 0;
                var hovered = false;

                images.hide();

                Slider();

                $('.arrow').each(function () {
                    $(this).on('hover', function () {
                        hovered = true;

                        images[current].dequeue().fadeOut(200);

                        var classes = $(this).attr("class").split(/\s/);
                        var selectedImage = $('#'+classes[1]+'Feature');

                        selectedImage.stop().fadeIn(300);

                        console.log(selectedImage);
                    });
                });


                function Slider(){
                    $(images[current]).fadeIn('slow').delay(3000).fadeOut('slow');

                    switch(current){
                        case 0: $('#topArrow').attr('id', 'topArrowEffect').delay(3800).queue(function(){
                            $(this).attr('id', 'topArrow');
                            $(this).dequeue();
                        });
                                break;

                        case 1: $('#rightArrow').attr('id', 'rightArrowEffect').delay(3800).queue(function(){
                            $(this).attr('id', 'rightArrow');
                            $(this).dequeue();
                        });
                                break;

                        case 2: $('#bottomArrow').attr('id', 'bottomArrowEffect').delay(3800).queue(function(){
                            $(this).attr('id', 'bottomArrow');
                            $(this).dequeue();
                        });
                                break;

                        case 3: $('#leftArrow').attr('id', 'leftArrowEffect').delay(3800).queue(function(){
                            $(this).attr('id', 'leftArrow');
                            $(this).dequeue();
                        });
                                break;
                    }       

                    $(images[current]).queue(function(){
                        current = current < images.length - 1 ? current + 1 : 0;
                        if(!hovered)
                            Slider();
                        $(this).dequeue();
                    });
                }
            });