html5里怎么让图片滚动

当你想在HTML5中实现图片滚动效果时,其实有很多方法可以做到，我就来给大家详细讲解一下如何让你的图片在网页中滚动起来，让你的页面更加生动有趣，我们一起来看看具体的操作步骤吧！

我们需要创建一个HTML文件,并在文件中添加基本的HTML结构，在<body>标签内，我们可以通过以下几种方式来实现图片滚动。

使用CSS3动画

第一种方法是利用CSS3中的动画功能,我们可以先定义一个关键帧动画，然后将动画应用到图片上。

在<head>标签内添加以下样式：

<style>
  .scroll {
    width: 300px;
    height: 200px;
    overflow: hidden;
    position: relative;
  }
  .scroll img {
    width: 100%;
    height: auto;
    animation: scrollImg 5s infinite linear;
  }
  @keyframes scrollImg {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-100%);
    }
  }
</style>

在<body>标签内添加以下代码：

<div class="scroll">
  <img src="example.jpg" alt="滚动图片">
  <img src="example.jpg" alt="滚动图片">
</div>

这里,我们创建了一个名为.scroll的div容器，并设置了其宽高和溢出隐藏，为图片添加了动画scrollImg，并设置动画时长为5秒，无限循环，线性播放。

使用JavaScript

除了CSS3动画,我们还可以使用JavaScript来实现图片滚动，以下是具体的操作：

在<head>标签内添加以下样式：

<style>
  .scroll-js {
    width: 300px;
    height: 200px;
    overflow: hidden;
    position: relative;
  }
  .scroll-js img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
  }
</style>

在<body>标签内添加以下代码：

<div class="scroll-js">
  <img src="example.jpg" alt="滚动图片">
</div>

在<script>标签内添加以下JavaScript代码：

<script>
  var img = document.querySelector('.scroll-js img');
  var top = 0;
  function scrollImg() {
    top--;
    if (top <= -200) {
      top = 0;
    }
    img.style.top = top + 'px';
    requestAnimationFrame(scrollImg);
  }
  scrollImg();
</script>

这里,我们使用JavaScript获取图片元素，并定义一个top变量来控制图片的垂直位置，创建一个scrollImg函数来实现图片滚动，并使用requestAnimationFrame方法来实现平滑的动画效果。

通过以上两种方法,你就可以轻松实现HTML5中图片的滚动效果了，这里只是简单的示例，你可以根据自己的需求进行调整和优化，以下是一些注意事项：