[Solved] Creating Image slider using only jQuery

by


Mabye something like this:

 jQuery(document).ready(function () {
    var images = [];
    var loop;
    var i = 0;

    images[0] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1GfA01TRDgrh-c5xWzrwSuiapiZ6b-yzDoS5JpmeVoB0ZCA87";
    images[1] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQSyUWiS4UUhdP1Xz81I_sFG6QNAyxN7KLGLI0-RjroNcZ5-HLiw";
    images[2] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_E_OgC6RiyFxKtw03NeWyelfRgJ3Ax3SnZZrufNkUe0nX3pjQ";

    $('img', '.maindiv').mouseover(function () {
        //Get divs inside main div and reverse them, so right is first
        var divs = $($('div','.maindiv').get().reverse());
        //Set up loop
        loop = setInterval(function(){
            divs.each(function(key, div){
                if (divs[key+1])
                {
                    //All divs gets image src from previous div > img
                    $('img', div).attr('src', $('img', $(divs[key+1])).attr('src'));
                }
                else
                {
                    //This is left div
                    if (images && images[i])
                    {
                        //If picture url not in array then add it
                        if ($.inArray($('img', div).attr('src'), images) == -1)
                        {
                            images.push($('img', div).attr('src'));
                        }
                        $('img', div).attr('src', images[i]);
                        i++;
                        if (i>= images.length) i = 0;
                    }
                }
            });
        }, 1500);
    }).mouseout(function(){
        clearInterval(loop);
    });
});

Fiddle

4

solved Creating Image slider using only jQuery