css怎么做点击轮播图

CSS中有多种方式来实现点击轮播图，下面将介绍其中两种方式，分别是使用checkbox和使用JavaScript实现。

1. 使用checkbox实现点击轮播图

div class="slider">
      input type="checkbox" id="slider-1" name="slider">
      label for="slider-1">
    img src="image1.jpg">
    /label>
      input type="checkbox" id="slider-2" name="slider">
      label for="slider-2">
    img src="image2.jpg">
    /label>
      input type="checkbox" id="slider-3" name="slider">
      label for="slider-3">
    img src="image3.jpg">
    /label>
    /div>
.slider input{
      display: none;
}
.slider label{
      display: block;
      float: left;
      width: 33.33%;
      height: 300px;
      position: relative;
}
.slider img{
      width: 100%;
      height: 100%;
}
.slider input:checked + label{
      z-index: 6;
}
.slider input:checked + label + input + label{
      z-index: 4;
}
.slider input:checked + label + input + label + input + label{
      z-index: 2;
}
    

代码中使用了checkbox来实现点击轮播图，每张图片对应一个checkbox和一个label标签，checkbox用于记录当前图片的选中状态，label用于显示图片，label的z-index属性需要根据图片的顺序设置，以确保选中的图片在最上层。

2. 使用JavaScript实现点击轮播图

div class="slider">
      img src="image1.jpg">
      img src="image2.jpg">
      img src="image3.jpg">
    /div>
.slider{
      position: relative;
      width: 100%;
      height: 300px;
      overflow: hidden;
}
.slider img{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 1;
      transition: opacity 1s;
      -webkit-transition: opacity 1s;
}
.slider img.active{
      opacity: 1;
      z-index: 2;
}
    var index = 1;
    var slider = document.getElementsByClassName("slider")[0];
    var images = slider.getElementsByTagName("img");
setInterval(function(){
      images[index-1].classList.remove("active");
      index++;
      if(index >
 images.length){
        index = 1;
  }
      images[index-1].classList.add("active");
}
    , 3000);
    

代码中使用了JavaScript的setInterval函数来实现轮播，每隔一定时间就会切换图片的显示，其中active类用于标记当前显示的图片，通过改变该类来切换图片。此外，需要将所有图片的初始opacity属性设置为0，并且需要保证图片的z-index属性能够正确地覆盖在前一张和后一张图片的上方。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！