Как постепенно обновлять изображения в таблице

ProgramBox

Как постепенно обновлять изображения в таблице

Post author:admin
Запись опубликована:29 октября, 2022
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

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

В ячейках должно отображаться изображение, которое постепенно переходит в другое изображение (одно из трех для каждой ячейки).

Хотя это работает для одной ячейки, в обеих ячейках изображения отображаются друг над другом.

Это из https://www.geeksforgeeks.org/image-transition-with-fading-effect-using-javascript /

 <!DOCTYPE html> 
<html>  
<head> 
<meta charset="utf-8" /> b
 
<style> 
    body { 
        text-align: center; 
    }   
.center {
  margin-left: auto;
  margin-right: auto;
}
table {border-collapse: separate;  border-spacing: 10px 20px;}

table, 
table td;}
</style>  
</head>   
<body> 
 <table class="center" style="max-width:100%"> 
    <tr><td>
        <div id="1"> 
            <img src= "image1.jpg" 
                 class="test2" /> 
           <img src="image2.jpg"  
                 class="test2" /> 
            <img src="image3.jpg" 
                 class="test2" /> 
        </div> 
      </td></tr>
      <tr><td>
      <div id="2">
      <img src= "image4.jpg"
         class="test" /> 
       <img src="image5.jpg" 
         class="test" />  
      <img src="image6.jpg"
         class="test" />  
    </div>
  </td></tr></table>
<script> 
    startImageTransition1(); 
    startImageTransition2(); 
    function startImageTransition1() { 
        var images = document.getElementsByClassName("test"); 

        for (var i = 0; i < images.length;   i) { 
            images[i].style.opacity = 1; 
        } 

        var top = 1; 

        var cur = images.length - 1; 

        setInterval(changeImage, 3000); 

        async function changeImage() { 

            var nextImage = (1   cur) % images.length; 

            images[cur].style.zIndex = top   1; 
            images[nextImage].style.zIndex = top; 

            await transition(); 

            images[cur].style.zIndex = top; 

            images[nextImage].style.zIndex = top   1; 

            top = top   1; 

            images[cur].style.opacity = 1; 
            
            cur = nextImage; 

        } 

        function transition() { 
            return new Promise(function(resolve, reject) { 
                var del = 0.01; 

                var id = setInterval(changeOpacity, 10); 

                function changeOpacity() { 
                    images[cur].style.opacity -= del; 
                    if (images[cur].style.opacity <= 0) { 
                        clearInterval(id); 
                        resolve(); 
                    } 
                } 

            }) 
        } 
    } 
    
     function startImageTransition2() { 
        var images = document.getElementsByClassName("test2"); 

        for (var i = 0; i < images.length;   i) { 
            images[i].style.opacity = 1; 
        } 

        var top = 1; 

        var cur = images.length - 1; 

        setInterval(changeImage, 3000); 

        async function changeImage() { 

            var nextImage = (1   cur) % images.length; 

            images[cur].style.zIndex = top   1; 
            images[nextImage].style.zIndex = top; 

            await transition(); 

            images[cur].style.zIndex = top; 

            images[nextImage].style.zIndex = top   1; 

            top = top   1; 

            images[cur].style.opacity = 1; 
            
            cur = nextImage; 

        } 

        function transition() { 
            return new Promise(function(resolve, reject) { 
                var del = 0.01; 

                var id = setInterval(changeOpacity, 10); 

                function changeOpacity() { 
                    images[cur].style.opacity -= del; 
                    if (images[cur].style.opacity <= 0) { 
                        clearInterval(id); 
                        resolve(); 
                    } 
                } 

            }) 
        } 
    } 
</script>

1. Можете ли вы разместить здесь свои HTML, CSS и Javascript? jsfiddle.net/Sapphion/nU477 или здесь? jsfiddle.net/crazyrohila/tczsC или здесь? jsfiddle.net/Guffa/GMfSB Можно ли использовать что-либо из этого кода?

2. Я сделаю это завтра. Спасибо.

3. Рассматривали ли вы возможность использования CSS-анимации вместо решения JS / setInterval?

Ответ №1:

Я не знаю, будет ли решение для анимации CSS жизнеспособным в реальном варианте использования, стоящем за вопросом, но, учитывая информацию в вопросе, которая включает в себя тот факт, что в каждой ячейке одинаковое количество изображений, вот не-Javascript метод с использованием CSS-анимации.

 @keyframes rotateimgs {
  0% {
    opacity: 0;
  }
  33.33% {
    opacity: 1;
  }
  66.66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    }
}

td {
  position: relative;
  --interval: 5s;/* set this to what you want the fade-in time to be */
}

img.fadeinout {
  position: absolute;
  top: 0;
  left: 0;
  animation-name: rotateimgs;
  animation-duration: calc(var(--interval) * 3);
  animation-iteration-count: infinite;
  opacity: 0;
}

img.fadeinout:nth-child(1) {
  animation-delay: 0s;
  position: relative;/* if your images are of different sizes, put this on the tallest */
}
img.fadeinout:nth-child(2) {
  animation-delay: var(--interval);
  }
img.fadeinout:nth-child(3) {
  animation-delay: calc(var(--interval) * 2);
  }

 <table>
  <tr>
    <td>
        <img class="fadeinout" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200318142245/CSS8.png" /> 
        <img class="fadeinout" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200318142309/php7.png" /> 
        <img class="fadeinout" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200318142254/html9.png" /> 
    </td>
    <td>class="fadeinout" 
        <img class="fadeinout" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200318142254/html9.png" /> 
        <img class="fadeinout" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200318142245/CSS8.png" /> 
        <img class="fadeinout" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200318142309/php7.png"  /> 
    </td>
  </tr>
</table>

Это кажется проще, чем метод JS, и имеет то преимущество, что должно быть меньше основной загрузки ЦП, хотя я не полностью исследовал, будет ли он автоматически использовать графический процессор.

1. ЭТО СРАБОТАЛО!!!!!!!!!!!!!!!!!!!!!! БОЛЬШОЕ СПАСИБО. МНОГО!!!!!!

2. НО: код добавляет стиль к img в css. Этот стиль применяется ко всем изображениям на этой странице. Таким образом, другое изображение на странице теперь невидимо. Есть ли способ защитить (или иммунизировать) изображение от этого стиля? Если я создам таблицу, подобную этой table {border-spacing 10px 20px}, но на той же странице мне нужна обычная таблица, как мне это сделать?

3. Извините, да, я был ленив. Используйте класс, а не тег img.

4. Итак, простите мое невежество: будет ли это работать (это не работает, но не уверен, почему): .rotating { position: absolute; top: 0; left: 0; animation-name: rotateimgs; animation-duration: calc(var(—interval) * 3); animation-количество итераций: бесконечно; непрозрачность: 0; } img.rotating: n-й дочерний элемент (1) { анимация-задержка: 0 секунд; позиция: относительная; } img.rotating: n-й дочерний элемент(2) { анимация-задержка: var(—интервал); } img.rotating: n-й дочерний элемент (3) { animation-delay: calc(var(—interval)* 2); } но это не работает

5. Я думаю, что хочу применить .rotating к изображениям, которые вращаются, а не к тем, которые этого не делают. Но тогда как мне справиться с проблемой n-го дочернего элемента?