MYSQL
PHP
HTML
CSS
JS

Плавная смена изображений

Возникают ситуации, когда необходимо создать баннер или галлерею с определёнными изображениями. Простая замена пути к изображению не создаёт привлекательный эффект.
?
1
2
3
4
5
6
<div id="images">
   <div style="background-image:url(/images/1.png)"></div>
   <div style="background-image:url(/images/2.png)"></div>
   <div style="background-image:url(/images/3.png)"></div>
   <div style="background-image:url(/images/4.png)"></div>
</div>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
   #images {
      width: 400px;
      height: 300px;
      overflow: hidden;
      cursor: pointer;
   }
    
   #images > * {
      width: 100%;
      height: 100%;
      margin, padding :0;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      transition: opacity .2s;
   }
</style>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script>
function gallery (root, animationSpeed) {
   animationSpeed = animationSpeed || 200;
   var childs = Array.from(root.children);
   var current = - 1;
   root.innerHTML = "";
 
   var setOpacity = function(opacity) {
      if (root.children[0]) {
         root.children[0].style.opacity = opacity;
        }
   };
 
   var next = function() {
      if (++current > childs.length - 1) {
         current = 0;
        }
 
      setOpacity(0);
 
      setTimeout((function(curr) {
         return function () {
                childs[curr].style.opacity = 0;
                root.innerHTML = childs[curr].outerHTML;
                setOpacity(1);
            }
      })(current), animationSpeed);
    };
 
   root.addEventListener('click', next);
   next();
}
 
gallery(document.getElementById("images"));
</script>
Демо (клик для смены):
Спасибо за внимание.
Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru

Случайные уроки по этой теме:

Тег progress Что такое теги Пример полурезиновой верстки сайта HTML теги video, audio HTML теги title, p, a, img
↑