Change images on hover

Question

I have a webpage with an x amount of images, when i hover over an image, i want to have it change every second to an image from a list.

This is what i have come up with: Fiddle

var images = [];
images[0] = "img1.png";
images[1] = "img2.png";
images[2] = "img3.png";
images[3] = "img4.png";
images[4] = "img5.png";
images[5] = "img6.png";

var i = 0;
setInterval(fadeDivs, 1000);

function fadeDivs() {
    i = i < images.length ? i : 0;
    $('img').fadeOut(100, function(){
        $(this).attr('src', images[i]).fadeIn(100);
    })
    i++;
}

But there are 2 problems with this,

• I want to have all the image links in the html like: <img src="img1.png"><img src="img2.png"> etc. contained in a div and make it visible or not(think that's the best way).
• And i need it only to happen when i hover over the image.

Do you guys have any ideas? I don't need code, just a push in the right direction :)

To clarify: i have an x amount of images on a page, let's say 25, when i hover over one of the 25 it needs to start changing, i can't have 1 list with images(like the answers) because every image(of the 25) will have a different list.

Answer 1

JSFiddle

 var images = [];
    images[0] = "img1.png";
    images[1] = "img2.png";
    images[2] = "img3.png";
    images[3] = "img4.png";
    images[4] = "img5.png";
    images[5] = "img6.png";

    var interval;
    var i = 0;

    $(function () {
        $("img").mouseover(function () {
            interval = setInterval(fadeDivs, 1000);
        })
       .mouseout(function () {
                clearInterval(interval);

        });
    });

    function fadeDivs() {
        i = i < images.length ? i : 0;
        $('img').fadeOut(100, function() {
            $(this).attr('src', images[i]).fadeIn(100);
        });
        i++;
    }

Answer 2

Hope, this is what you're looking for. It adds all images to a container and starts an endless rotation when hovering. The interval is stopped, when leaving the element.

HTML

<div class="wrapper">
    <img class="active" src="http://placehold.it/200x200&amp;text=X1" alt="">
</div>

<div class="wrapper">
    <img class="active" src="http://placehold.it/200x200&amp;text=Y1" alt="">
</div>

CSS

.wrapper {
    position: relative;
    height: 200px;
    margin-bottom: 250px;
}

.wrapper img {
    opacity: 0;
    position: absolute;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.wrapper img.active {
    opacity: 1;
}

JavaScript

var wrapper = $('.wrapper');
var images = null;
var running = null;

images = [];
images.push( $('<img/>', { src: 'http://placehold.it/200x200&text=X2', alt: '' } ) );
images.push( $('<img/>', { src: 'http://placehold.it/200x200&text=X3', alt: '' } ) );
wrapper.eq(0).append(images);

images = [];
images.push( $('<img/>', { src: 'http://placehold.it/200x200&text=Y2', alt: '' } ) );
images.push( $('<img/>', { src: 'http://placehold.it/200x200&text=Y3', alt: '' } ) );
wrapper.eq(1).append(images);

wrapper.hover(
    function() {
        var e = $(this);
        running = setInterval(function() {
            var c = e.find('.active');
            var n = c.next();

            if (!n.length) {
                n = e.children().first();
            }

            c.removeClass('active');
            n.addClass('active');    
        }, 1000);
    },
    function() {
        clearInterval(running);
        running = null;
    }
);

Demo

Try before buy