HTML中小图片横着轮播的代码

在HTML页面中，常常会看到小图片横向滚动的效果，这种效果很容易实现，只需要使用HTML的img标签和CSS的animation属性即可。 下面是一个简单的例子，其中包括一个包含四个小图片的div，图片被水平排列并通过CSS动画来实现滚动效果。

以下是HTML代码：

<div class="scroll-container">
    <img src="image1.png">
    <img src="image2.png">
    <img src="image3.png">
    <img src="image4.png">
</div>

以下是CSS代码：

.scroll-container {
    display: flex;
    flex-wrap: Nowrap;
    overflow-x: scroll;
    animation: scrolling 8s linear infinite;
}

@keyframes scrolling {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

首先，我们使用flex布局将img元素排列成一行，并将容器的overflow-x属性设置为scroll，以便在元素宽度大于容器宽度时实现滚动。 然后，创建一个称为scrolling的动画，该动画将元素从容器的左侧滚动到右侧，通过transform: translateX（-100％）将元素恢复到初始位置，形成无限循环的滚动效果。 值得注意的是，在动画中使用的8秒时间是通过animation属性中的第二个参数来指定的，并且我们选择了线性动画函数以达到平滑和连续的滚动效果。 总之，这是一种简单而灵活的方法，在HTML中实现小图片横向滚动的效果，对于像新闻、广告等页面组件中循环播放多个元素的场景非常有用。