JavaScript « Перестановка картинок

    <script language="javascript">
        function Troyka()
        {
            var p_Images = new Array(); // Все картинки
            var p_Places = new Array(); // На каком месте какая картинка стоит
            var p_big_place = -1; // Номер места на котором показывать большую картинку

            function p_GetName()
            {
                // Возвращает случайное имя
                                                                var my_ind = Math.round(Math.random() * 1000);
                var bad_ind = 0;
                while ((document.getElementById('Troyka' + my_ind)) && (bad_ind < 1000))
                {
                    my_ind = Math.round(Math.random() * 1000);
                    bad_ind = parseInt(bad_ind) + 1;
                }

                if (bad_ind < 1000)
                    return 'Troyka' + my_ind;
                else
                    return false;
            }

            function ChangeImg()
            {

                // Меняет картинки при щелчке
                                                                var ind = 0; // Индекс места на который щелкнули

                var pict_len = p_Images.length;
                while ((ind < pict_len) && (p_Images[ind]["name"] != this.id))
                    ind = ind + 1;

                if (ind == pict_len)
                    return false;

                this.src = p_Images[p_Places[p_big_place]]["small"];
                document.getElementById(p_Images[p_big_place]["name"]).src = p_Images[p_Places[ind]]["big"];

                var tmp_place = p_Places[p_big_place];
                p_Places[p_big_place] = p_Places[ind];
                p_Places[ind] = tmp_place;

                return true;
            }

            this.AddImage = function(in_pict_small, in_pict_big)
            {
                // Добавляем картинки к массиву всех картинок и размещаем на новом месте
                var new_img_index = parseInt(p_Images.length);
                p_Images[new_img_index] = new Array();
                p_Images[new_img_index]["big"] = in_pict_big;
                p_Images[new_img_index]["small"] = in_pict_small;
                p_Images[new_img_index]["name"] = p_GetName();

                p_Places[new_img_index] = new_img_index;

                return Boolean(p_Images[new_img_index]["name"]);
            }

            this.ShowMe = function(in_parent_element)
            {
                // Выводит тройку в родительский элемент in_parent_element
                if (!p_Images.length)
                    return false;

                // Определяем стартовые параметры

                p_big_place = 0;

                var newimg = document.createElement('img');
                newimg.id = p_Images[p_Places[p_big_place]]["name"];
                newimg.src = p_Images[p_Places[p_big_place]]["big"];
                in_parent_element.appendChild(newimg);

                for (var key in p_Images)
                {
                    if (key != p_big_place)
                    {
                        newimg = document.createElement('img');
                        newimg.id = p_Images[key]["name"];
                        newimg.src = p_Images[key]["small"];
                        newimg.onclick = ChangeImg;

                        in_parent_element.appendChild(newimg);
                    }
                }
                return true;

            }


        }

        var my_tr1 = new Troyka;
        my_tr1.AddImage('/_img/small1.JPG', '/_img/big1.JPG');
        my_tr1.AddImage('/_img/small2.JPG', '/_img/big2.JPG');
        my_tr1.AddImage('/_img/small3.jpg', '/_img/big3.jpg');

        var my_tr2 = new Troyka;
        my_tr1.AddImage('/_img/small1.JPG', '/_img/big1.JPG');
        my_tr1.AddImage('/_img/small2.JPG', '/_img/big2.JPG');
        my_tr1.AddImage('/_img/small3.jpg', '/_img/big3.jpg');

        my_tr1.ShowMe(document.getElementById('imgs1'));
        my_tr2.ShowMe(document.getElementById('imgs2'));
    </script>
 

Ссылка на файл с примером