笔记大全

css3怎么让图片滑动

更新时间：2023-06-17

1. 简介

CSS3可以让您为网站添加一些动态效果，如图片的滑动效果。CSS3创建动画的技术称为“过渡”（transition）。过渡可以设置动画的属性、时间以及过渡方式，例如线性、缓动等。今天我们将介绍如何使用CSS3的过渡效果来创建图片的滑动效果。

2. CSS3属性设置

现在我们来看看CSS3属性如何设置，以实现图片滑动效果。
首先，您需要设置图片的样式，包括宽度、高度、位置以及图片本身。接下来，将其放在一个较大的容器中，将宽度设置为您想要的视窗大小，重要的是，要对容器中的图片的位置进行定位。为此，我们使用“position: absolute”。

.slide-container {
  width: 800px; //设置容器宽度
  height: 400px;  //设置容器高度
  margin: auto;   //自动居中
  position: relative; //设置相对定位
  overflow: hidden; //隐藏超出容器大小的内容
}

.slide-container img {
  width: 800px; //设置图片宽度
  height: 400px; //设置图片高度
  position: absolute; //设置绝对定位
}

.slide-container img:nth-child(1) {
  left: 0;  //第一张从左侧位置开始
}

.slide-container img:nth-child(2) {
  left: 800px; //第二张从右侧开始滑动
}

3. 使用过渡效果实现图片滑动

在上一步中，我们将图片放置在容器中并设置其样式。现在，我们将使用“过渡”实现图片滑动效果。我们使用CSS3中的“translateX()”来设置图片的位置，以实现图片平滑地从一侧滑动到另一侧的效果。

.slide-container img {
  width: 800px;
  height: 400px;
  position: absolute;
  transition: transform 1s ease;  //设置过渡时间及方式
}

.slide-container img.left-slide {
  transform: translateX(-800px);  //向左侧移动800px
}

.slide-container img.right-slide {
  transform: translateX(800px); //向右侧移动800px
}

4. JS实现自动滑动

现在您已经完成了CSS3属性的设置和使用过渡实现图片滑动的教程。最后，我们可以使用JavaScript实现自动滑动效果，并将其应用到网站中。最简单的方法是使用“setInterval”函数，将图片自动滑动到下一张，这种方法需要使用一个变量来记录当前图片的位置，以便在下一个时间点滑动到正确的位置。

let position = 0;  //变量记录当前图片的位置

function autoSlide() {
  position++; //将当前位置的值加1
  if (position > 2) { //图片数量为2个，当该值为3时，重置为1
    position = 1;
  }
  if (position == 1) { //根据不同位置，设置滑动方向
    document.querySelector('.slide-container img:nth-child(1)').classList.add('left-slide');
    document.querySelector('.slide-container img:nth-child(2)').classList.add('right-slide');
  } else if (position == 2) {
    document.querySelector('.slide-container img:nth-child(1)').classList.remove('left-slide');
    document.querySelector('.slide-container img:nth-child(2)').classList.remove('right-slide');
  }
}

setInterval(autoSlide, 5000); //每隔5秒自动滑动到下一张图片

c语言编程笔录