Эффект фото ленты

Однажды передо мной стала задача создать фото ленту на javascript. Этот эффект очень часто применяется в разных сайтах. Но мне захотелось написать собственный вариант. Думая я пришел к следующему решению. К тому моменту я учил в учебнике как работать с таблицей и ее столбцами и строками соответственно. Вариант решения оказался следующим. Ленту я составил из таблицы (дивы применять не пришлось).

<table width="450" border="0" cellspacing="0" cellpadding="0" id="effectTable">
 <tr>
  <td align="left" valign="middle" style="width:9px;">
   <img src="left.gif" width="7" height="21" border="0" onclick="next();" style="cursor:pointer;">
  </td>
  <td align="center" valign="top" style="width:144px;">
   <a href="javascript:winOpen('1b.jpg')" id="lnk1"><img src="1.jpg" width="100" height="75" class="img_frame"></a>
  </td>
  <td align="center" valign="top" style="width:144px;">
   <a href="javascript:winOpen('2b.jpg')" id="lnk2"><img src="2.jpg" width="100" height="75" class="img_frame"></a>
  </td>
  <td align="center" valign="top" style="width:144px;">
   <a href="javascript:winOpen('3b.jpg')" id="lnk3"><img src="3.jpg" width="100" height="75" class="img_frame"></a>
  </td>
  <td align="right" valign="middle" style="width:9px;">
    <img src="right.gif" width="7" height="21" border="0" onclick="previous();" style="cursor:pointer;">
  </td>
 </tr>
</table>

Она состоит из 3 рисунков (количество рисунков можно увеличить или уменьшить по вашему желанию) и двух боковых стрелок, при клике на которые будут выполняться функция пролистывания ленты.
А технологию пролистывания я сделал следующим образом. В первую очередь рисунок самой крайней ячейки убирается (display='none'), далее запускается функция setInterval которая в процентном соотношении (для достижения плавного эффекта сужения) начинает сужать эту ячейку. И когда ширина ячейки доходит до 1 пикселя, она удаляется и взамен к ней создается новая ячейка только уже с противоположной стороны ленты. Дальше запускается следующая функция setInterval, которая начинает расширять новую ячейку до ширины как у других ячеек. Когда достигается определенная ширина, создается рисунок и вставляется в эту ячейку. Таким образом достигается эффект пролистывания.
Вот и сам скипт

<script language="javascript">
<!--
var c=2;
var timer;
var timer2;
var src;
var table=document.getElementById("effectTable"); // ссылка на таблицу (ленту)
var picId=new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg"); // массив с путями к рисункам которые содержаться в ленте
var attributes={src:picId[c],width:100,height:75,border:0}; // создается объект attributes, который содержит параметры нового рисунка

function next() { // функция для клика в левую сторону
  if(c < (picId.length-1)) { // если счетчик c не достиг последнего рисунка в ленте
    table.rows[0].cells[1].firstChild.style.display="none"; // обращение к таблица.первый_ряд.первый_столбец.первый_дочерний_узел, который является рисунком и скрывается. Обратите внимание, что счет ряда начинается с 0, а столбцом с 1
    c+=1; // увеличивается счетчик
    attributes={src:picId[c],width:100,height:75,border:0}; // перезаписываются элементы объекта attributes, главное здесь новый путь к рисунку
    src=picId[c]; // переменной src с глобальной видимостью присваивается новое значение
    timer=setInterval("cellNarrowing(1,3,1,3)", 5); // запускается таймер для уменьшения ширины ячейки
  }
}

function previous() { // анологично функции next рабоатет функция previous только в обратном направлении
  if(c > 2) {
    table.rows[0].cells[3].firstChild.style.display="none";
    attributes={src:picId[c-3],width:100,height:75,border:0};
    src=picId[c-3];
    c-=1;
    timer=setInterval("cellNarrowing(3,1,3,1)", 5);
  }
}

function cellNarrowing(cellIndex,cellAddIndex,cellDeleteIndex,stretchCellParam) { // функция для сужения ячейки
  var cell=table.rows[0].cells[cellIndex]; // переменной cell приравнивается ссылка на ячеку, которую нужно сузить
  var cellWidth=parseInt(cell.style.width); // переменной cellWidth приравнивается ширина СУЖАЮЩЕЙСЯ ячейки
  if(parseInt(cell.style.width)<=2) { // если ширина ячейки достигла 2 или 1
    clearInterval(timer); // останавливаем таймер
    cell.style.width="1px"; // устанавливает ширину ячейки равной единице
    table.rows[0].deleteCell(cellDeleteIndex); // удаляем сузившуюся ячейку
    table.rows[0].insertCell(cellAddIndex); // добавляем новую ячейку. Создаем новый элемент документа <а>, вставляем его в эту ячейку и придаем ячейке ширину равной 1
    var newLink=document.createElement("a");
    var bigImgIndex=src.lastIndexOf(".");
    var bigImg=src.substring(0,bigImgIndex)+"b.jpg";
    newLink.setAttribute("href","javascript:winOpen(""+bigImg+"")");
    table.rows[0].cells[cellAddIndex].appendChild(newLink);
    table.rows[0].cells[cellAddIndex].style.width="1px";
    table.rows[0].cells[cellAddIndex].style.textAlign="center";
    timer2=setInterval("stretchCell("+stretchCellParam+")",5); // и наконец запускаем функцию которая растягивает новую ячейку до определенной ширины
  }
  else {
    cell.style.width=Math.round(cellWidth*60/100)+"px"; // если же ячейка еще не сузилась, то В ПРОЦЕНТОМ соотношении сужаем ее. Обратите внимание умножаем на 60. Не думайте, что результат останется тем же, нет он уменьшится ;)
  }
}

function winOpen(img) {
  var nw = window.open(img,"newWindow","width=500, height=375, menubar=no, resizable=no, status=no, titlebar=no, toolbar=no");
  nw.focus();
}

function stretchCell(cellIndex) { // функция расширения новой ячейки
  var cell=table.rows[0].cells[cellIndex]; // ссылка на новую ячейку
  var cellWidth=parseInt(cell.style.width); // ширина новой ячейки
  cell.style.width=Math.round(cellWidth*210/100)+"px"; // в этот раз уже увеличиваем в процентом соотношении, уже умножаем на 210
  if(parseInt(cell.style.width)>=144) { // если ширина достигнута создается новый рисунок к которому привязываются все параметры из объекта attributes (объект имеет глобальную видимость)
    clearInterval(timer2);
    table.rows[0].cells[cellIndex].style.width="144px";
    var newElement=document.createElement("img");
    for(i in attributes) {
      newElement.setAttribute(i, attributes[i]);
    }
    cell.firstChild.appendChild(newElement); // и наконец в новую ячейку вставляется новый рисунок
  }
}
//-->
</script>

На этом эффект закончен. Еще... регулируя процентные цифры 60 и 210 вы будете регулировать скорость прокрутки.
Кадыр.
http://hrjs.livejournal.com/