Adding a fade between JavaScript slideshow?

Question

I am building a webpage which contains a slideshow of images. I have used JavaScipt to change between each image at random with a 3 second delay between changes:

function changeimg(){
    const images = [
        'url("../../static/main/images/slideshow/dog1.jpg")', 
        'url("../../static/main/images/slideshow/dog2.jpg")', 
        'url("../../static/main/images/slideshow/dog3.jpg")', 
        'url("../../static/main/images/slideshow/dog4.jpg")',
    ]
    const div = document.getElementsByClassName("mybody")[0]
    const bgimg = images[Math.floor(Math.random()*images.length)];
    div.style.backgroundImage = bgimg;
}
setInterval(changeimg, 3000)

</script>

I was wondering if there is a way to create a fade between each image as they change. I would like to keep the random slection for next image.

Thanks in advance :)