Смена содержимого div по таймеру и по наведению на кнопки

[silmarion]

Доброго всем дня, есть 3 гиф баннера.
1.gif
2.gif
3.gif

Они должны отображаться в диве, по порядку, к примеру показ каждого по 3 секунды.
Под этим блоком должны быть 3 кнопки, при наведении на кнопку 1, кнопку 2, кнопку 3 должны соответственно отображаться 1.gif, 2.gif, 3.gif

Как сделать, чтобы если не кнопки не наводишь, баннера шли подряд 1,2,3
И при наведении на кнопки переключалось 1,2,3

И главное - чтобы при переключении гифки начинали показываться с начала, а не с середины либо конца.

 

[Hmelex]

В Гугле или Яндексе напиши:
СЛАЙДЕР изображений.

Далее выбирай подходящий по запросам.

 

[silmarion]

В Гугле или Яндексе напиши:
СЛАЙДЕР изображений.

Далее выбирай подходящий по запросам.

Очень смешно)

Мы не ищем простых путей)
Пробовал, искал, для просто картинок есть много подходящих, проблема именно в том, что баннера в виде анимационных гифок.

Набросал вот такую хрень, как сюда таймер добавить, чтобы кроме onmouseover смены была еще смена с таймером.
И как полностью очистить блок при смене, чтобы gif-ка начинала крутится сначала.

<div  id="fr1" style="width:580px;height:200px;background:#ff0000">
<img src="1.gif">
</div>
<div onmouseover="bb1()" id="b1" style="float:left;width:193px;height:40px;background:green">Кнопка 1</div>
<div onmouseover="bb2()" id="b2" style="float:left;width:193px;height:40px;background:yellow">Кнопка 2</div>
<div onmouseover="bb3()" id="b3" style="float:left;width:193px;height:40px;background:magenta">Кнопка 3</div>

<script>
function bb1() {
document.getElementById("fr1").innerHTML="";
document.getElementById("fr1").innerHTML="<img src=\"1.gif\">";
}
 function bb2() {
document.getElementById("fr1").innerHTML="";
document.getElementById("fr1").innerHTML="<img src=\"2.gif\">";
    }
 function bb3() {
document.getElementById("fr1").innerHTML="";
document.getElementById("fr1").innerHTML="<img src=\"3.gif\">";
    }
 </script>

 

[omgh]

function bbb(elem) {
a = elem.id;
var bs1 = setInterval('changel(a)', 1000);
}

function changel(id){
   //тут плавная смена элементов
}

function bb1() {
clearInterval(bs1);
document.getElementById("fr1").innerHTML="";
document.getElementById("fr1").innerHTML="<img src=\"1.gif\">";
}

<div onmouseover="bb1()" onmouseout="bbb(this)" id="b1" style="float:left;width:193px;height:40px;background:green">Кнопка 1</div>

Как-то так, но пожелал бы больше динамики.

 

[silmarion]

function bbb(elem) {
a = elem.id;
var bs1 = setInterval('changel(a)', 1000);
}

function changel(id){
   //тут плавная смена элементов
}

function bb1() {
clearInterval(bs1);
document.getElementById("fr1").innerHTML="";
document.getElementById("fr1").innerHTML="<img src=\"1.gif\">";
}

<div onmouseover="bb1()" onmouseout="bbb(this)" id="b1" style="float:left;width:193px;height:40px;background:green">Кнопка 1</div>

Как-то так, но пожелал бы больше динамики.

Что-то он отказывается работать*((((((((((
Ошибка: ReferenceError: bs1 is not defined
Источник: file:///D:/main/index.html
Строка: 50

Подсобите плиз