Javascript-форум - Остановка анимации по клику

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Остановка анимации по клику (https://javascript.ru/forum/misc/72961-ostanovka-animacii-po-kliku.html)

Остановка анимации по клику

Добрый день!
Пишу диплом по граф дизайну и пришлось столкнуться в программированием, хотя полный ноль в этом.
Нужно сделать анимацию - зацикленная смена нескольких картинок (по сути gif). По клику на определенную картинку анимация останавливается на этой картинке и раскрывается дополнительная текстовая информация. По повторному клику запускается заново. И так для каждой из картинок.
Господа разработчики, помогите плииииз!

Цитата:

Сообщение от Annaboka

по сути gif

Если gif, то никак, а если показываются картинки из массива, то можно.

Да, понятно, что gif не дает такой возможности. Я теперь в поисках алгоритма, как это все реализовать. С какой стороны подступиться

Цитата:

Сообщение от Annaboka

в поисках алгоритма

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

рони,
видимо не это нужно коли речь об "остановить анимацию". Щелчок по анимации - остановили таймер, второй щелчок - запустили вновь.

Цитата:

Сообщение от laimas

Щелчок по анимации - остановили таймер

правильно, но это ничего не меняет из сказанного выше, но можно и без остановки таймера (не изменять индекс на паузе)

Цитата:

Сообщение от рони

но это ничего не меняет из сказанного выше

Ну а зачем индекс, если анимация, а не слайдер, а значит таймер с частотой сек/кадров, щелкнули, остановилось, это и будет кадр выбранный. Я так понял.

Цитата:

Сообщение от laimas

Я так понял.

всё верно, но решения могут быть разные.

Цитата:

Сообщение от рони

решения могут быть разные.

ну да, если не дергать таймер, а сверху добавлять слой.

PS. Но тогда при удалении слоя, анимация не обязательно будет после выбранного кадра, значит код усложнится.

автосмена картинок и стоп/старт по клику

laimas,
Annaboka,

вариант без остановки таймеров.(надобы прелоад добавить)

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .carousel{
    width: 350px;
    height: 170px;
    position: relative;
    opacity: 0;
     border-radius: 8px;
     box-sizing: border-box;
     border: #8B4513 2px solid;
     transition: opacity .8s ease-in;
     background-size: 350px 170px;
  }
  .carousel.show{
    opacity: 1;
  }
   .carousel.vertical{
    width: 170px;
    height: 350px;
    background-size: 170px 350px;
   }
   .carousel h1{

     color: #FFFFFF;
     opacity: 0;
     transition: .3s ease-in;
     text-align: center;
     bottom: 5px;
     margin:  auto 0;
     transform:  scale(0);
   }
   .carousel.pause h1{
     opacity: 1;
     transform:  scale(1);
   }
  </style>

  <script>
 window.addEventListener("DOMContentLoaded", function() {
    [].forEach.call(document.querySelectorAll(".carousel"), function(el) {
        var img = JSON.parse(el.dataset.src),
            text = JSON.parse(el.dataset.text);
            len = img.length,
            i = 0,
            p = el.dataset.pause || 5E3,
            h = document.createElement("h1");
        el.appendChild(h);

        function g() {
            el.style.backgroundImage = "url(" + img[i] + ")";
            h.textContent = text[i];
            el.classList.add("show");
            window.setTimeout(k, p);
        }
        g();

        function k() {
            el.classList.contains("pause") || (i = ++i % len, el.classList.remove("show"));
            window.setTimeout(g, 800);
        }
        el.addEventListener("click", function() {
            el.classList.toggle("pause");
        });
    });
});
  </script>
</head>

<body>
<div class="carousel" data-pause="3000"
data-src='["http://sunnytravel.by/upload/image/Tours/Nicca-karnaval.jpg",
"http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg",
"http://1.bp.blogspot.com/-aleHkBUuqOI/VY0HrCytsXI/AAAAAAAAq1g/f2emGtdqdWo/s640/2015-06-05_0145.jpg",
"http://turj.ru/images/e/3/9/7/1/b641b8a77c.jpg"]' data-text='["карнавал", "Ницца", "маска", "праздник"]'>
</div>

</body>
</html>

рони,
"по сути gif" я понимаю как gif-анимацию, а не слайдер, и это анимация с частой Nкадров в сек (мультик). :) Хотя кто его знает, что подразумевалось. Если все-таки gif-анимация, то проще останавливать/запускать таймер.

рони,
Спасибо!!! Огромнейшее!!!
Единственное, с чем пока не могу справиться - поменять шрифт и размер. Если это вообще возможно. И количество слов предполагается больше для каждой картинки, а влезает только 3.

смена картинок + описание по клику, innerHTML, dataset.

Annaboka,
учите css - строки 7 - 40, и js учите Добавление и удаление узлов

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .carousel{
    width: 350px;
    height: 170px;
    position: relative;
    opacity: 0;
     border-radius: 8px;
     box-sizing: border-box;
     border: #8B4513 2px solid;
     transition: opacity .8s ease-in;
     background-size: 350px 170px;
  }
  .carousel.show{
    opacity: 1;
  }
    .carousel + h1{
     cursor: default;
     width: 350px;
     color:  #0000CD ;
     opacity: 0;
     transition: .3s ease-in;
     text-align: center;
     margin:  auto 0;
     transform:  scale(0);
   }
   .carousel + h1 span{
     color: #FF1493;
     font-size: .8em;
   }

   .carousel.pause + h1{
     opacity: 1;
     transform:  scale(1);
   }
  </style>

  <script>
 window.addEventListener("DOMContentLoaded", function() {
    [].forEach.call(document.querySelectorAll(".carousel"), function(el) {
        var img = JSON.parse(el.dataset.src),
            text = JSON.parse(el.dataset.text);
            len = img.length,
            i = 0,
            p = el.dataset.pause || 5E3,
            h = document.createElement("h1");

        document.body.insertBefore(h,el.nextSibling)
        function g() {
            el.style.backgroundImage = "url(" + img[i] + ")";
            h.innerHTML = text[i];
            el.classList.add("show");
            window.setTimeout(k, p);
        }
        g();

        function k() {
            el.classList.contains("pause") || (i = ++i % len, el.classList.remove("show"));
            window.setTimeout(g, 800);
        }
         function tgl() {
            el.classList.toggle("pause");
        }
        el.addEventListener("click", tgl);
        h.addEventListener("click", tgl);
    });
});
  </script>
</head>

<body>
<div class="carousel" data-pause="3000"
data-src='["http://sunnytravel.by/upload/image/Tours/Nicca-karnaval.jpg",
"http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg",
"http://1.bp.blogspot.com/-aleHkBUuqOI/VY0HrCytsXI/AAAAAAAAq1g/f2emGtdqdWo/s640/2015-06-05_0145.jpg",
"http://turj.ru/images/e/3/9/7/1/b641b8a77c.jpg"]' data-text='["карнавал<br><span>и всякий бред</span>",
"Ницца<br><span>и всякий бред</span>",
"маска<br><span>и всякий бред</span>",
"праздник<br><span>и всякий бред</span>"]'>
</div>

</body>
</html>

рони,
Спасибо!