Помогите реализовать прокрутку изображений.
Принцип таков. На экране три картинки. По нажатию на кнопку "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>
Спасибо за помощь.