徽标轮播上的图像重叠。适用于文本块，但不适用于图像

Question

https://jsfiddle.net/youazs87/13/ 这就是我正在努力实现的目标。它不是一个完全无缝的无限循环，但它足够平滑，轻微的重置不会严重到看起来很糟糕。 然而，当我尝试用下面的代码简单地用图像替换 HTML 文本块时，所有内容都会重叠。但它会在足够好的时间重置，如果项目不重叠，它就会起作用。

https://gyazo.com/2f6194298a3393275d280d89f0928693

    <div class="logos">
        <div class="logos-slide">
            <img src="./assets/logos/amazon-dynamodb-logo.svg"/>
            <img src="./assets/logos/amazon-rds-logo.svg"/>
            <img src="./assets/logos/amazon-redshift-logo.svg"/>
            <img src="./assets/logos/amazon-s3.svg"/>
            <img src="./assets/logos/apache-hbase-logo.svg"/>
            <img src="./assets/logos/apache-kafka.svg"/>
            <img src="./assets/logos/apache-zookeper-logo.svg"/>
            <img src="./assets/logos/aws-developer-tools.svg"/>
            <img src="./assets/logos/aws.svg"/>
            <img src="./assets/logos/azure-blob-storage.svg"/>
            <img src="./assets/logos/azure-cosmos-db-logo.svg"/>
            <img src="./assets/logos/azure-data-lake-logo.svg"/>
            <img src="./assets/logos/azure-devops-logo-vertical.svg"/>
            <img src="./assets/logos/azure-full.svg"/>
            <img src="./assets/logos/azure-sql-database-logo.svg"/>
            <img src="./assets/logos/azure-synapse-analytics-logo.svg"/>
            <img src="./assets/logos/cassandra.svg"/>
            <img src="./assets/logos/digital-ocean.svg"/>
            <img src="./assets/logos/google-cloud-logo.svg"/>
            <img src="./assets/logos/google-cloud-sql-1.svg"/>
            <img src="./assets/logos/hadoop-logo.svg"/>
            <img src="./assets/logos/hive.svg"/>
            <img src="./assets/logos/ms-dynamics-365.svg"/>
            <img src="./assets/logos/ms-sql.svg"/>
            <img src="./assets/logos/mysql.svg"/>
            <img src="./assets/logos/oracle.svg"/>
            <img src="./assets/logos/postgresql-vertical-logo.svg"/>
            <img src="./assets/logos/power-bi-2020.svg"/>
            <img src="./assets/logos/python_1.svg"/>
            <img src="./assets/logos/r_logo.svg "/>
            <img src="./assets/logos/rackspace-horizontal.svg"/>
            <img src="./assets/logos/salesforce.svg"/>
            <img src="./assets/logos/spark.svg"/>
        </div>
        <div class="logos-slide">
            <img src="./assets/logos/amazon-dynamodb-logo.svg"/>
            <img src="./assets/logos/amazon-rds-logo.svg"/>
            <img src="./assets/logos/amazon-redshift-logo.svg"/>
            <img src="./assets/logos/amazon-s3.svg"/>
            <img src="./assets/logos/apache-hbase-logo.svg"/>
            <img src="./assets/logos/apache-kafka.svg"/>
            <img src="./assets/logos/apache-zookeper-logo.svg"/>
            <img src="./assets/logos/aws-developer-tools.svg"/>
            <img src="./assets/logos/aws.svg"/>
            <img src="./assets/logos/azure-blob-storage.svg"/>
            <img src="./assets/logos/azure-cosmos-db-logo.svg"/>
            <img src="./assets/logos/azure-data-lake-logo.svg"/>
            <img src="./assets/logos/azure-devops-logo-vertical.svg"/>
            <img src="./assets/logos/azure-full.svg"/>
            <img src="./assets/logos/azure-sql-database-logo.svg"/>
            <img src="./assets/logos/azure-synapse-analytics-logo.svg"/>
            <img src="./assets/logos/cassandra.svg"/>
            <img src="./assets/logos/digital-ocean.svg"/>
            <img src="./assets/logos/google-cloud-logo.svg"/>
            <img src="./assets/logos/google-cloud-sql-1.svg"/>
            <img src="./assets/logos/hadoop-logo.svg"/>
            <img src="./assets/logos/hive.svg"/>
            <img src="./assets/logos/ms-dynamics-365.svg"/>
            <img src="./assets/logos/ms-sql.svg"/>
            <img src="./assets/logos/mysql.svg"/>
            <img src="./assets/logos/oracle.svg"/>
            <img src="./assets/logos/postgresql-vertical-logo.svg"/>
            <img src="./assets/logos/power-bi-2020.svg"/>
            <img src="./assets/logos/python_1.svg"/>
            <img src="./assets/logos/r_logo.svg "/>
            <img src="./assets/logos/rackspace-horizontal.svg"/>
            <img src="./assets/logos/salesforce.svg"/>
            <img src="./assets/logos/spark.svg"/>
        </div>
    </div>

我尝试了一些解决方案，例如在 .logos-slide 中执行“position:absolute”来防止重叠，但最终只是删除了轮播的第二部分。然后我尝试为其提供一些填充，这样它就不会重叠，这解决了重叠问题，但轮播只是在到达第二部分之前重置。

Answer 1

由于图像尺寸不同，您面临这个问题。使用以下代码并保持所有 18 个图像的高度和宽度相同。这样，它就能按预期无缝流程工作。 确保将 img src 替换为实际图像的 src，并添加一个类来固定高度和宽度。

 <div class="logos">
        <div class="logos-slide">
            <img src="1.jpg" alt="Image 0" class="a">
            <img src="1.jpg" alt="Image 1" class="a">
            <img src="1.jpg" alt="Image 2" class="a">
            <img src="1.jpg" alt="Image 3" class="a">
            <img src="1.jpg" alt="Image 4" class="a">
            <img src="1.jpg" alt="Image 5" class="a">
            <img src="1.jpg" alt="Image 6" class="a">
            <img src="1.jpg" alt="Image 7" class="a">
            <img src="1.jpg" alt="Image 8" class="a">
            <img src="1.jpg" alt="Image 9" class="a">
            <img src="1.jpg" alt="Image 10" class="a">
            <img src="1.jpg" alt="Image 11" class="a">
            <img src="1.jpg" alt="Image 12" class="a">
            <img src="1.jpg" alt="Image 13" class="a">
            <img src="1.jpg" alt="Image 14" class="a">
            <img src="1.jpg" alt="Image 15" class="a">
            <img src="1.jpg" alt="Image 16" class="a">
            <img src="1.jpg" alt="Image 17" class="a">
            <img src="1.jpg" alt="Image 18" class="a">
        </div>
        <div class="logos-slide">
            <img src="1.jpg" alt="Image 0" class="a">
            <img src="1.jpg" alt="Image 1" class="a">
            <img src="1.jpg" alt="Image 2" class="a">
            <img src="1.jpg" alt="Image 3" class="a">
            <img src="1.jpg" alt="Image 4" class="a">
            <img src="1.jpg" alt="Image 5" class="a">
            <img src="1.jpg" alt="Image 6" class="a">
            <img src="1.jpg" alt="Image 7" class="a">
            <img src="1.jpg" alt="Image 8" class="a">
            <img src="1.jpg" alt="Image 9" class="a">
            <img src="1.jpg" alt="Image 10" class="a">
            <img src="1.jpg" alt="Image 11" class="a">
            <img src="1.jpg" alt="Image 12" class="a">
            <img src="1.jpg" alt="Image 13" class="a">
            <img src="1.jpg" alt="Image 14" class="a">
            <img src="1.jpg" alt="Image 15" class="a">
            <img src="1.jpg" alt="Image 16" class="a">
            <img src="1.jpg" alt="Image 17" class="a">
            <img src="1.jpg" alt="Image 18" class="a">
        </div>
    </div>

.a{
    padding: 0 25px;
    border:solid 1px black;
    display:inline;
    height: 50px;
    width: 50px;
}