如何在页面加载图像时显示文本传送带

<div class="container">
  <img src="image.jpg" alt="图像">
  <marquee behavior="scroll" direction="left">这是文本传送带的内容</marquee>
</div>

.container {
  width: 500px;
  height: 200px;
  border: 1px solid #ccc;
  text-align: center;
}

marquee {
  width: 100%;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
}

var marquee = document.querySelector('marquee');
var image = document.querySelector('img');

image.addEventListener('click', function() {
  marquee.stop();
});

image.addEventListener('mouseover', function() {
  marquee.setAttribute('scrollamount', '0');
});

image.addEventListener('mouseout', function() {
  marquee.setAttribute('scrollamount', '3');
});