时间戳

首页 > 解决方案 > 如何逐步更新表格中的图像

javascript - 如何逐步更新表格中的图像

问题描述

我正在尝试创建一个网页，该网页是一行有 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>

标签： javascripthtml

解决方案

我不知道 CSS 动画解决方案在问题背后的实际用例中是否可行，但鉴于问题中的信息，其中包括每个单元格中有相同数量的图像这一事实，这里是一个非使用 CSS 动画的 Javascript 方法。

@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>

This seems simpler than the JS method, and has the advantage that there ought to be less main CPU usage - though I haven't completely investigated whether it will use the GPU automatically.

推荐阅读