[分享]css中如何设置轮播图

CSS提供了一种便捷的方式来设置轮播图，通过设置不同的属性和值，可以实现多种形式的轮播图。/ 定义轮播图容器 / .carousel { : relative; width: 100; height:...

CSS提供了一种便捷的方式来设置轮播图，通过设置不同的属性和值，可以实现多种形式的轮播图。

/* 定义轮播图容器 */
.carousel {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

/* 定义图片及其容器 */
.carousel-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .5s ease-out;
}

/* 定义当前图片显示 */
.carousel-img.active {
  opacity: 1;
}

/* 定义轮播图控制按钮 */
.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}

/* 定义控制按钮的位置 */
.carousel-control.left {
  left: 20px;
}

.carousel-control.right {
  right: 20px;
} 

以上代码是轮播图的基本结构，其中包括轮播图容器、图片及其容器、当前显示图片、轮播图控制按钮等。

接下来，需要在HTML文件中引入这些样式，并创建图片容器，设置图片地址和初始状态。

<link rel="stylesheet" href="carousel.css">

<div class="carousel">
  <div class="carousel-img active">
    <img src="img1.png">
  </div>
  <div class="carousel-img">
    <img src="img2.png">
  </div>
  <div class="carousel-img">
    <img src="img3.png">
  </div>
  <div class="carousel-control left"><prev</div>
  <div class="carousel-control right"><next</div>
</div> 

最后，需要添加JavaScript代码来实现轮播图的自动播放和控制按钮的功能。

var carouselImgs = document.querySelectorAll('.carousel-img');
var controls = document.querySelectorAll('.carousel-control');
var currentImg = 0;

function showImg(index) {
  carouselImgs[currentImg].classList.remove('active');
  carouselImgs[index].classList.add('active');
  currentImg = index;
}

function next() {
  var index = (currentImg + 1) % carouselImgs.length;
  showImg(index);
}

function prev() {
  var index = (currentImg + carouselImgs.length - 1) % carouselImgs.length;
  showImg(index);
}

setInterval(next, 5000);

controls.forEach(function(control) {
  control.addEventListener('click', function() {
    if (this.classList.contains('left')) {
      prev();
    } else if (this.classList.contains('right')) {
      next();
    }
  });
}); 

以上JavaScript代码负责实现轮播图的自动播放和控制按钮的功能，其中包括展示当前图片、切换至下一张图片、切换至上一张图片等操作。