Ротация картинок в блоке
 

<ul><li class="item first">
          <img width="100%"  id="1" alt="" class="loaded" style="left: 0px;">
        </li>
        <li class="item">
          <img width="100%"  id="2" alt="Модные платья весна лето 2014"class="loaded" style="left: 0.15px;">
        </li>
        <li class="item">
          <img width="100%"  id="3" alt="" class="loaded" style="left: 0.15px;">
        </li>
        <li class="item">
          <img width="100%" id="4" alt="Модные платья весна лето 2014"  class="loaded" style="left: 0.15px;"></ul>
        </li>

Как сделать, чтобы они выводились поочередно. Т.е при загрузке страницы показало 2 картинки, через 2 сек они сменились на две другие..

Это называется слайдер.
Две картинки = два слайдера

Изначально на те картинки, которые не нужно показывать, ставишь display:none (или как-то по другому скрываешь), потом так:

setInterval(function() {
  // тут по очереди открываешь/закрываешь нужные пары картинок
}, 2000);

Таких картинок может быть n кол-во, и я не знаю сколько их будет. И вручную каждую пару не получится менять. Можете на правильный путь поставить? по setInterval я то знаю, не в этом проблема

Самое простое решение уже назвали - слайдер.
Как вариант сделать что-то типа этого:

var imgs = [['1.png', '2.png'], ['3.png', ...], ......];
var n = 0;
setInterval(function() {

  if (n >= imgs.length-1) {
    n = 0;
    // показываем нужные пары картинок как imgs[n][0] и imgs[n][1]
  }
  n++;
  
}, 2000);

Писал на ходу, возможно есть ошибки. Конечно, есть варианты и с предзагрузкой и мб ещё какими ништяками, но это уже совсем другой вопрос

//Ах да, я тот ещё говнокодер, по этому не особо верь мне :)