Прокрутка изображений

[gen552]

Помогите реализовать прокрутку изображений.

Принцип таков. На экране три картинки. По нажатию на кнопку "myDiv1",
все три изображения меняются. То есть: первая картинка меняется на вторую, вторая на третью, третья - новая картинка. То есть смена картинок происходит на единицу.

На данный момент меняется только одна - третья.

Вот сам код:

var myDiv1 = document.getElementById('myDiv1'); // кнопка Next
        var myDiv2 = document.getElementById('myDiv2'); // отображение изображений
        var myDiv3 = document.getElementById('myDiv3'); // кнопка Previos 
                                               
            var myPath = new Array // массив с путями к картинкам
            
                (
                    'images/cars_001.jpg',
                    'images/cars_002.jpg',
                    'images/cars_003.jpg',
                    'images/cars_004.jpg',
                    'images/cars_005.jpg',
                    'images/cars_006.jpg',
                    'images/cars_007.jpg',
                    'images/cars_008.jpg',
                    'images/cars_009.jpg'                  
                )
                
                var myImages=new Array(); // предзагрузка изображений

                for(i=0; i<myPath.length; i++)
                    {                       
	                   myImages[i] = new Image();
	                   myImages[i] = myPath[i];
                    }    
                                        

    var j = 0 ; k = 3; // количество отображаемых картинок (3 штуки)
    
    for (j; j<k; j++) // вывод первых трёх картинок
        {
            var myImg = document.createElement ('IMG');
            myDiv2.appendChild(myImg);    
                             
            myImg.src = myImages[j]
        }        
                    
    myDiv1.onclick = function () // прокрутка изображений: следующаая картинка. То что нужно реализовать.
        {            
            j++;  k++;

                    myImg.src = myImages[j]
        }

И HTML

<div id="myDiv1" class="myDiv">Вперед</div>
        <div id="myDiv2" class="myDiv"> </div>    
        <div id="myDiv3" class="myDiv">Назад</div>

Спасибо за помощь.

[melky]

<div id="next" class="myDiv">Вперед</div>
        <div id="pic" class="myDiv"> </div>   
        <div id="prev" class="myDiv">Назад</div>



<script>
var next = document.getElementById('next'); // кнопка Next
        var myDiv2 = document.getElementById('pic'); // отображение изображений
        var prev = document.getElementById('prev'); // кнопка Previos 
                                               
         // *!* тут мои картинки. подставил,чтобы видеть,все ли ок. можно,конечно,заменить на свой массив */!*
            var myPath = [  // массив с путями к картинкам 
                    
                    'http://worms.org.ua/forum/medals/missions1.gif',
                    'http://cs9846.vkontakte.ru/u56640186/a_926164aa.jpg',
                 'http://cs957.vkontakte.ru/u56640186/108183787/x_a11bbb4c.jpg',
                    'http://javascript.ru/forum/image.php?u=12584&dateline=1301573529',
                    'http://javascript.ru/forum/images/smilies/haha.gif'
                ]
                
                var myImages=[] ;// предзагрузка изображений

                for(i=0; i<myPath.length; i++)
                    {                       
	                   myImages[i] = new Image();
	                   myImages[i]*!*.src*/!* = myPath[i];
                    }    
                                        

    var j = 0 ; k = 3; // количество отображаемых картинок (3 штуки)
    
    for (j; j<k; j++) // вывод первых трёх картинок
        {
             //*!* магия : мы создаем новую картинку */!*

            //var myImg = document.createElement ('IMG');

            //*!* магия : присваиваем ей путь,равный УЖЕ СУЩЕСТВУЮЩЕЙ . от этого путь становится равным  [object HTMLImageElement]*/!*

           // myImg.src = myImages[j];

            // вот так в  3 раза меньше кода
            myDiv2.appendChild( myImages[j] );    
                             
            
        }        
                    
    next.onclick = function () // прокрутка изображений: следующаая картинка. То что нужно реализовать.
        {            
            j++;  k++;

                    myImg.src = myImages[j]
        }
</script>

кстати,что будет ,если нажать на вперед / назад? я про логику.

что будет? какая картинка должна меняться ? все три ??

или вообще, что должно происходить?

если бы она была одна,все бы было ясно. но когда их три...

[dmitriymar]

gen552,
получи массив тегов img. и пройди по нему-меняя атрибут src.
ну а в том что у тебя 3й меняется-всё правильно-он последний созданный и только ему ты меняешь атрибут

myDiv1.onclick = function () // прокрутка изображений: следующаая картинка. То что нужно реализовать.
{
j++; k++;

myImg.src = myImages[j]
}

должен всем 3м менять-а ты меняешь только одному -последнему созданному.

[gen552]

Вот, сделал

myDiv1.onclick = function () // прокрутка изображений: следующаая картинка
        {   
             var allImg = myDiv2.getElementsByTagName("IMG");
             myImg.getAttribute('id');

                var myAllImages = new Array();
                
                for (i=0; i< allImg.length; i++)
                    {
                        myAllImages[i] = new Image();
                        myAllImages[i] = allImg[i]
                        myAllImages[i].src = myImages[j++];
                        myAllImages[i].setAttribute ('id', 'myImages' + j);
                    }

  //           console.log (myAllImages)

Только есть нюанс. Изображения меняются не по одной картинке, а сразу по три. Тоже неплохо, но интересно было бы ещё и такой вариант реализовать.

То есть, допустим есть всего 15 картинок (массив). На экране отображено три: 1,2,3. Нажимаем на кнопку Next и на экране видим 2,3,4. Снова нажимаем Next и видим 3,4,5 -> 4,5,6 -> 5,6,7 -> ... 13,14,15.

Как это реализовать исходя из кода выше?

А на данный момент так происходит: 1,2,3 -> 4,5,6 -> 7,8,9 -> 10,11,12 -> 13,14,15


И ещё вопрос. Я создал Id для каждого изображения. Меняется картинка - меняется Id. Всё работает. Но! Когда самый первый раз нажимаю на кнопку Next, то вместо myImages3 получаю myImages4.

Поясню. Id - идентифекатор, К - картинка.

myImages0 - К0
myImages1 - К1
myImages2 - К2

Нажимаем кнопку Next и картина следующая:

myImages4 - К3
myImages5 - К4
myImages6 - К5

myImages7 - К6
myImagesN - КN

Ну а дальше нумерация по порядку идёт.

То есть вот здесь : myImages4 - К3, должно быть вот так :myImages3 - К3
Немогу понять, почему пропускает цифру 3.

[dmitriymar]

Только есть нюанс. Изображения меняются не по одной картинке, а сразу по три. Тоже неплохо, но интересно было бы ещё и такой вариант реализовать.

они у тебя меняются по одной-но очень быстро. введи задержку

То есть, допустим есть всего 15 картинок (массив). На экране отображено три: 1,2,3. Нажимаем на кнопку Next и на экране видим 2,3,4. Снова нажимаем Next и видим 3,4,5 -> 4,5,6 -> 5,6,7 -> ... 13,14,15.

смотри на свой j в нём проблема-после прохождения цикла ты его не уменьшаешь

И ещё вопрос. Я создал Id для каждого изображения. Меняется картинка - меняется Id. Всё работает. Но! Когда самый первый раз нажимаю на кнопку Next, то вместо myImages3 получаю myImages4.

myAllImages[i].setAttribute ('id', 'myImages' + j); сам подумай что ты делаешь-зачем ты ид элемента меняешь?

[gen552]

они у тебя меняются по одной-но очень быстро. введи задержку
смотри на свой j в нём проблема

Изображения меняются нормально. Просто на данный момент сейчас так: нажимаем Next - 3 картинки уехало, 3 приехало. Снова нажимаем Next - три уехало, 3 приехало и т.д. Вот я описал:

А на данный момент так происходит: 1,2,3 -> 4,5,6 -> 7,8,9 -> 10,11,12 -> 13,14,15

У меня слайд-шоу не из 1 картинки а из трёх. Три на экране отображается. Полоска из 3 изображений.

Вот как здесь.



Не мое, но пытаюсь такое сделать.

А я хочу что бы было вот так:

То есть, допустим есть всего 15 картинок (массив). На экране отображено три: 1,2,3. Нажимаем на кнопку Next и на экране видим 2,3,4. Снова нажимаем Next и видим 3,4,5 -> 4,5,6 -> 5,6,7 -> ... 13,14,15.

смотри на свой j в нём проблема-после прохождения цикла ты его не уменьшаешь

А зачем уменьшать? Там нужно просто при каждом нажатии на кнопку Next всю эту полоску сдвинуть на одну позицию (картинку) влево.

Вообще я думаю должно быть вот так:

var j = 0 ; k = 3; // количество отображаемых картинок (3 штуки)
Жмём Next
var j = 1 ; k = 4;

Жмём Next
var j = 2; k = 5;

Жмём Next
var j = 3; k = 6;
Жмём Next
... ... ... ...
var j = N; k = N;

Т.е. как то менять значения глобальных переменных на 1.
Таким образом вообще можно будет задавать по сколько изображений за раз прокручивать. Если указать так var j = 2 ; k = 5 - то по два изображения. Если так : var j = 3 ; k = 6 то по три, т.е. так как на данный момент происходит.

myAllImages[i].setAttribute ('id', 'myImages' + j); сам подумай что ты делаешь-зачем ты ид элемента меняешь?

Знаю что нет смысла. Просто эксперимент. Но всё равно интересно почему пропускает цифру "3"

У меня и изображение 4-ое пропускало. По-этому пришлось сделать так:

myAllImages[i].src = myImages[j++];

вместо традиционного

j++;
    ... ...

;

Вообще я так и понял что проблема в "J". Просто не могу додуматься что именно ему не так.

[dmitriymar]

посмотри на его значения. поймёшь всё сам.ошибка в логике

У меня и изображение 4-ое пропускало. По-этому пришлось сделать так:
myAllImages[i].src = myImages[j++];

вместо того чтобы понять в чём она-ты её попытался обойти-но она осталась

А зачем уменьшать? Там нужно просто при каждом нажатии на кнопку Next всю эту полоску сдвинуть на одну позицию (картинку) влево.

просмотри значения j в цикле через тот же алерт и поймёшь для чего его уменьшать после прохода цикла