Edit in JSFiddle

var div = document.getElementById("slider"),
    img = div.getElementsByTagName("img"),
    total = img.length,
    i = 0,
    slider = function(){
        img[i].style.opacity = 0;
        i = i == total - 1 ? 0 : ++i;
        img[i].style.opacity = 1;
    },
    interval = null;
 
img[i].style.opacity = 1;
 
div.addEventListener("mouseover", function(){
    slider();
    interval = setInterval(slider, 1500);
}, false);
 
div.addEventListener("mouseout", function(){
    clearInterval(interval);
});

<div id = "slider">
    <img src = "http://www.circuito.mx/images/Presa_Brockman_01.jpg" />
    <img src = "https://blogdepelusita.files.wordpress.com/2012/06/img201010091724205.jpg?w=590" />
    <img src = "http://www.fincabarcelona-mallorca.com/images/portfolio/actividades-rurales-mallorca.jpg" />
    <img src = "https://lh3.googleusercontent.com/-Njmduuanh-0/UkpT2-GRNkI/AAAAAAAAKtI/AWqIfTWo1DU/s0/photo.jpg" />
</div>

div img{
    position: absolute;
    opacity: 0;
    transition: .4s;
}