HTML网页设计图片滚动

以下是使用HTML和CSS实现图片滚动的方法：

1.使用CSS动画实现图片滚动

HTML代码：

<div class="slider">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

CSS代码：

.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slider img {
  width: 500px;
  height: 300px;
  animation: slide 10s infinite;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1500px);
  }
}

2.使用JavaScript实现图片滚动

HTML代码：

<div class="slider">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

CSS代码：

.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slider img {
  width: 500px;
  height: 300px;
  float: left;
}

JavaScript代码：

var slider = document.querySelector('.slider');
var imgs = document.querySelectorAll('.slider img');
var imgWidth = imgs[0].clientWidth;
var currentImg = 0;

function slide() {
  if (currentImg === imgs.length - 1) {
    currentImg = 0;
  } else {
    currentImg++;
  }
  slider.style.transform = 'translateX(' + (-imgWidth * currentImg) + 'px)';
}

setInterval(slide, 3000);