0

Есть задание к экзамену: сделать сайт, не менее 6 статических страниц.

Есть страницы, в которых представлены разные картинки. Картинки меняются по нажатию кнопок вперед и назад. Адреса рисунков записаны в массив. Переменная i - счетчик, по которому и меняются картинки, т.е их номера в массиве. Хочу сделать чтоб в ячейке между кнопками "Назад" и "Вперед", содержалась надпись "Артикул 00i", где i - номер рисунка (1, 2, 3, 4... n), который также меняется при нажатие на кнопку. Как это реализовать? Спасибо.

Вот код страницы для примера:

var i = 0;
var imgarr = new Array();

// массив с адресами
imgarr[0] = "resurs/stol1.jpg";
imgarr[1] = "resurs/stol2.jpg";
imgarr[2] = "resurs/stol3.jpg";
imgarr[3] = "resurs/stol4.jpg";
imgarr[4] = "resurs/stol5.jpg";

// это функции на смену рисунков
function vpered() {
  i++
  if (i > imgarr.length - 1) {
    i = 0
  }
  document.getElementById("img").src = imgarr[i];
  return (i);
}

function nazad() {
  i = i - 1
  if (i < 0) {
    i = imgarr.length - 1
  }
  document.getElementById("img").src = imgarr[i];
  return (i);
}
<tr>
  <td align="center">
    <input type="button" value="Назад" onclick="nazad()">
  </td>

  <td colspan="2" align="center">
    //вот ячейка в которой должна меняться надпись
    <script type="text/javascript">
      document.write("Артикул 00", i);
    </script>
  </td>

  <td align="center">
    <input type="button" value="Вперед" onClick="vpered()">
  </td>
</tr>

1 ответ 1

2
.....
    function vpered() 
    {
        i++
        if (i > imgarr.length - 1)
        {
            i = 0
        }
        changeImage();
        return(i);
    }

    function nazad()
    {
        i = i - 1
        if (i < 0)
        {
            i = imgarr.length - 1
        }
        changeImage();
        return(i);     
    }

    function changeImage() {
        document.getElementById("img").src = imgarr[i];
        document.getElementById("pArticle").innerHTML = "Артикул 00" + i;
    }
</script>

и разметка

<tr>
    <td align = "center"><input type = "button" value = "Назад" onclick = "nazad()"></td>

    <td  colspan = "2" align = "center">
         <p id="pArticle">
             Артикул 000
         </p>
    </td>

    <td align = "center"><input type = "button" value = "Вперед" onClick = "vpered()"></td>
</tr>

ЕЩЁ можно убрать функции nazad() и vpered(), а использовать, скажем, next(-1) и next(1), cо следующим содержимым:

function next(diff) {
  i = (i + diff + imgarr.length) % imgarr.length ;
  changeImage();
}
1
  • Спасибо большое;)Оч выручили) Все оказывается просто оч) Спасибо) 6 янв 2011 в 6:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.