на чисто js не получится с анимацией, если только создать анимационные гифы

ну под анимацией я имел ввиду использования set_interval и изменение координат рисунка

kent666
а нельзя просто тогда задать абсолютное позиционирование и менять display:none; display: block; у рисунка через какое то время?

Верстка,заточена с учетом ИЕ6

<div style="position:relative;width:476px;height:136px;background:#fff;margin:0px 10px 5px 0px;padding:0px;border:solid 1px #D3C2A3;">
<div  style="position:absolute;width:470px;height:130px;margin:3px;background:#eee0d0;">
<div  id ="slider_2" style="position:absolute;width:396px;height:100px;margin:15px 0px 0px 35px;clip:rect(auto 396px auto 0px);">
</div>
<img style="position:absolute;width:24px;height:48px;margin:38px 0px 0px 7px;cursor:pointer;" src="./img/l.png" onClick="l_slider2()">
<img style="position:absolute;width:24px;height:48px;margin:38px 0px 0px 435px;cursor:pointer;" src="./img/r.png" onClick="r_slider2()">
</div>
</div>

Инициализация в DOM

function slider2_start()
{
var s='';
var i=0;
s+='<img id="img_s20" src='+image[0]+' style="position:absolute;width:128px;height:96px;border:solid 2px #fff;left:'+132*2+'px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);opacity:0.7;" onMouseOver="$(\'img_s20\',\'o\',100,2);" onMouseOut="$(\'img_s20\',\'o\',70,2);">';
s+='<img id="img_s21" src='+image[1]+' style="position:absolute;width:128px;height:96px;border:solid 2px #fff;left:'+132+'px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);opacity:0.7;" onMouseOver="$(\'img_s21\',\'o\',100,2);" onMouseOut="$(\'img_s21\',\'o\',70,2);">';
s+='<img id="img_s22" src='+image[2]+' style="position:absolute;width:128px;height:96px;border:solid 2px #fff;left:0px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);opacity:0.7;" onMouseOver="$(\'img_s22\',\'o\',100,2);" onMouseOut="$(\'img_s22\',\'o\',70,2);">';
for (i=3;i<image.length;i++) {
s+='<img id="img_s2'+i+'" src='+image[i]+' style="position:absolute;width:128px;height:96px;border:solid 2px #fff;left:-132px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);opacity:0.7;" onMouseOver="$(\'img_s2'+i+'\',\'o\',100,2);" onMouseOut="$(\'img_s2'+i+'\',\'o\',70,2);">';
}
document.getElementById('slider_2').innerHTML=s;
}

Само движение картинок вправо-влево

var cnt_s2=0
function r_slider2()
{
if((cnt_s2+3)<image.length) {cnt_s2++;}
$('img_s2'+(cnt_s2-1),'l',132*3,10);
$('img_s2'+(cnt_s2+0),'l',132*2,10);
$('img_s2'+(cnt_s2+1),'l',132*1,10);
$('img_s2'+(cnt_s2+2),'l',0,10);
$('img_s2'+(cnt_s2+3),'l',-132,10);
}

function l_slider2()
{
if(cnt_s2>1) {cnt_s2--;}
$('img_s2'+(cnt_s2-1),'l',132*3,10);
$('img_s2'+(cnt_s2+0),'l',132*2,10);
$('img_s2'+(cnt_s2+1),'l',132*1,10);
$('img_s2'+(cnt_s2+2),'l',0,10);
$('img_s2'+(cnt_s2+3),'l',-132,10);
}

Заместь функции $ пишете свою ,которая будет двигать картинки циклично через setTimeout
с помощью.
document.getElementById(idname).left для каждой картинки ,к которой вы будете обращатся через эту функцию.
Свою функцию на паблик не выкладываю,так что прийдется ее допиливать самому.

Собственно все,выше пример выводит три картинки и двигает по одной вправо-влево,плюс плавно меняется прозрачность при наведении на картинку.

bodja - похвально, что решили все сделать своими руками. На самом деле не вижу ничего сложного. Задача очень интересная, и если бы не отсутствие времени, я бы сам занялся ее реализацией, чисто из интереса.

bodja спасибо! У меня тоже появились некоторые идеи по поводу реализации данной задачи. Здесь можно использовать и json и многое другое.
В общем когда сделаю выставлю в этой теме