html实现图片左右滚动代码示例

涛哥
Html代码

下面是一个HTML图片左右滚动的代码示例：

<!DOCTYPE html>
<html>
<head>
	<title>图片左右滚动示例</title>
	<style>
		body {
			background-color: #f7e8e8;
			font-family: Arial, sans-serif;
			text-align: center;
			padding-top: 50px;
		}
		.container {
			width: 80%;
			margin: 0 auto;
			overflow: hidden;
		}
		.slider {
			display: flex;
			width: calc(100% * 5);
			animation: slide 10s linear infinite;
		}
		.slider img {
			width: calc(100% / 5);
			height: auto;
		}
		@keyframes slide {
			0% {transform: translateX(0);}
			100% {transform: translateX(-400%);}
		}
	</style>
</head>
<body>

	<div class="container">
		<div class="slider">
			<img src="img1.jpg">
			<img src="img2.jpg">
			<img src="img3.jpg">
			<img src="img4.jpg">
			<img src="img5.jpg">
		</div>
	</div>

</body>
</html>

这个示例包括一个名为“slider”的div元素，其中包含五张图片。这些图片将被放置在一个flex容器中，容器的宽度为所有图片的总宽度。然后，使用CSS动画，slider元素将无限循环地向左平移，导致图像在视图中滚动。

您可以根据需要更改容器和图像的大小、数量和样式。此外，您也可以根据需要更改CSS动画的持续时间和效果。

猜你喜欢：

html代码实现自动轮播图

html图片轮播代码怎么写

php实现图片全屏功能代码示例

 
  • html代码
  • html图片轮播
  • 图片轮播特效