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

Тема в разделе "Мегафлуд", создана пользователем silmarion, 2 дек 2014.

  1. silmarion

    silmarion

    Регистр.:
    21 июн 2012
    Сообщения:
    194
    Симпатии:
    19
    Доброго всем дня, есть 3 гиф баннера.
    1.gif
    2.gif
    3.gif

    [​IMG]

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

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

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

    Hmelex

    Регистр.:
    15 апр 2008
    Сообщения:
    526
    Симпатии:
    120
    :mad:В Гугле или Яндексе напиши:
    СЛАЙДЕР изображений.

    Далее выбирай подходящий по запросам.
     
    Q_BASIC нравится это.
  3. silmarion

    silmarion

    Регистр.:
    21 июн 2012
    Сообщения:
    194
    Симпатии:
    19
    Очень смешно)

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

    Набросал вот такую хрень, как сюда таймер добавить, чтобы кроме 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>
    
     
  4. omgh

    omgh Создатель

    Регистр.:
    22 сен 2013
    Сообщения:
    21
    Симпатии:
    13
    Код:
    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>
    
    Как-то так, но пожелал бы больше динамики.
     
  5. silmarion

    silmarion

    Регистр.:
    21 июн 2012
    Сообщения:
    194
    Симпатии:
    19
    Что-то он отказывается работать*((((((((((
    Ошибка: ReferenceError: bs1 is not defined
    Источник: file:///D:/main/index.html
    Строка: 50

    Подсобите плиз
     
    Последнее редактирование: 9 дек 2014