Напишите «Карусель» — ленту изображений, которую можно листать влево-вправо нажатием на стрелочки.
В дальнейшем к ней можно легко добавить анимацию, динамическую подгрузку и другие возможности.
В этой задаче разработка HTML/CSS-структуры составляет 90% решения.
Исходный документ: tutorial/browser/events/carousel-src/index.html
Нужно стилизовать его так, чтобы он был длинной лентой, из которой внешний DIV вырезает нужную часть для просмотра:
Чтобы список был длинный и элементы не переходили вниз, ему ставится width: 9999px, а элементам, соответственно, float:left.
Элементы с display:inline имеют дополнительные отступы для возможных «хвостов букв».
В частности, для img нужно поставить в стилях явно display:block, чтобы пространства под ними не оставалось.
При прокрутке UL сдвигается назначением margin-left:
У внешнего DIV фиксированная ширина, поэтому «лишние» изображения обрезаются.
Снаружи окошка находятся стрелки и внешний контейнер.
Реализуйте эту структуру, и к ней прикручивайте обработчики, которые меняют ul.style.marginLeft.