Показать сообщение отдельно
  #14 (permalink)  
Старый 15.03.2017, 17:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

смена картинок с opacity эффектом

<!DOCTYPE html>

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

  </style>

  <script>
  window.addEventListener("DOMContentLoaded", function() {
    [].forEach.call(document.querySelectorAll(".carousel"), function(el) {
        var img = el.querySelectorAll("img"),
            len = img.length,
            i = len - 1,
            p = el.dataset.pause || 5E3;
        !function g() {
            img[i].classList.remove("show");
            i = ++i % len;
            img[i].classList.add("show");
            window.setTimeout(g, p)
        }()
    })
});
  </script>
</head>

<body>
<div class="carousel" data-pause="3000">
  <img src="http://sport-magazindom.ru/wp-content/uploads/2016/05/1cbe44f2ac36cff2da2bbf7356b4a004.jpg" alt="">
  <img src="http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg" alt="">
  <img src="http://1.bp.blogspot.com/-aleHkBUuqOI/VY0HrCytsXI/AAAAAAAAq1g/f2emGtdqdWo/s640/2015-06-05_0145.jpg" alt="">
  <img src="http://www.fotki.ykt.ru/albums/userpics/2013/11-18/1384739526_image.jpg" alt="">
</div>
<div class="carousel vertical" data-pause="1000">
  <img src="https://im0-tub-ru.yandex.net/i?id=164eda9533e043b61c9abb3e9fb9ecc6-l&n=13" alt="">
  <img src="http://static.mnogonado.net/images/img.php?w=250&l=%2Fstore%2Fimage%2F800x600_qdv_57108c999ba0b1775c4bfe263023fb6a_1474795-404.png" alt="">
  <img src="http://rugirlz.com/pics/hv_dp20088034.jpg" alt="">
  <img src="https://im1-tub-ru.yandex.net/i?id=34d38102784fbb45657d73def5d2178f-l&n=13" alt="">
</div>
</body>
</html>
Ответить с цитированием