Показать сообщение отдельно
  #3 (permalink)  
Старый 26.03.2016, 03:47
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

maximamus, так?
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Untitled</title>
    <style>
      .hidden {
        display: none;
      }
    </style>
  </head>
  <body>
    <button class="js-button" data-toggle-text="&#215;">&#8801;</button>
    
    <div class="js-container">
      <div>
        <img src="http://javascript.ru/forum/images/smilies/unsure.gif" alt="">
      </div>
    </div>
    
    <script>
      var images = ['unsure.gif', 'laugh.gif', 'agree.gif', 'dance3.gif', 'lol.gif'];
      var button = document.querySelector('.js-button');
      var container = document.querySelector('.js-container');
      var i = 0;
      
      button.onclick = function() {
        toggle(container);
      };
      
      function changeImage() {
        var img = container.querySelector('img');

        img.src = 'http://javascript.ru/forum/images/smilies/' + images[++i % images.length];
      }
      
      function toggle(elem) {
        if ( elem.classList.contains('hidden') ) {
          elem.classList.remove('hidden')
        } else {
          elem.classList.add('hidden');
          changeImage();
        }
      }
    </script>
  </body>
</html>
Ответить с цитированием