css 纯css旋转木马

Posted 2021-05-13

<aside class="carousel left">
  <!-- image 0 -->
  <img src="featuredImage.jpg" alt="millennium falcon in air fight">
  <div class="featured-image-caption"> Pew Pew Pew, dog fight!</div>

  <!-- img 1 -->
  <input type="radio" name="slide_switch" id="id1">
  <label for="id1">
    <img src="featuredImage.img.1.jpg" alt="storm troopers on field" width="100px" height="auto">
  </label>
  <img src="featuredImage.img.1.jpg" alt="storm troopers on field">

  <!-- img 2 -->
  <input type="radio" name="slide_switch" id="id2">
  <label for="id2">
    <img src="featuredImage.img.2.jpg" alt="rebels at war" width="100px" height="auto">
  </label>
  <img src="featuredImage.img.2.jpg" alt="rebels at war">


  <!-- img 3 -->
  <input type="radio" name="slide_switch" id="id3">
  <label for="id3">
    <img src="featuredImage.img.3.jpg" alt="Darth Vader" width="100px" height="auto">
  </label>
  <img src="featuredImage.img.3.jpg" alt="Darth Vader">

  <!-- img 4 -->
  <input type="radio" name="slide_switch" id="id4">
  <label for="id4">
    <img src="featuredImage.img.4.jpg" alt="" width="100px" height="auto">
  </label>
  <img src="featuredImage.img.4.jpg" alt="">
</aside>

/*
CSS3 Carousel - Clifford Fajardo
The markup is very simple:
  - Radio Inputs
  - Labels with thumbnails to detect click event
  - Main Image
*/


/**************************  CAROUSEL STYLES START **************************/
.carousel .featured-image-caption {
 padding-bottom : 10px;
}

.carousel > img {
 width : 470px;
}

.carousel {
 display     : inline-block;
 position    : relative;
 padding-top : 270px;
}


/*Child selector -selects all imgs that are DIRECT children of .carousel.
Since nearest parent has display other than static & img display is absolute,
images get absolutely positioned relative to the nearest parent that
has declared position. By setting direct image elements absolute
with a top of 0 (means go to the top leave no space & left 0 leave no left space,
we push the images to the top left corner)
*/
.carousel > img {
 position   : absolute;
 top        : 0;
 left       : 0/**/;
 transition : all 0.5s;
}


/*CSS attribute selector - select any input tag with this attribute & value*/
.carousel input[name="slide_switch"] {
 display : none;
}

/* Floated elements remain a part of the flow of the web page.
 This is distinctly different than page elements that use absolute positioning.
Absolutely positioned page elements are removed from the flow of the webpage,*/
.carousel label {
 float      : left;
 margin     : 0px 15px 0 0;
 border     : 3px solid #999;
 opacity    : 0.6/**/;
 transition : all 0.5s;
}

.carousel label:last-of-type {
 margin-right : 0;
}

.carousel label img {
 display : block;
}

body > span {
 float : left;
}


/* Click events Start*/
/*adjacent selector or next-sibling:
 ..in this case:
  select a <label> that directly follows the input element with x attr that
  has been check ...very specific*/

.carousel input[name="slide_switch"]:checked + label {
  border-color : #666;
  opacity      : 1;
}

/*main images*/
/*general sibling combinator
 select all images that are sibling siblings  of input w/..
*/
.carousel input[name="slide_switch"] ~ img {
 opacity : 0;
}
/*^^this hide all main image, but on click of thumbnails
the images will be displayed at normal size*/

/*adjacent selector or next-sibling:
 ..in this case:
  select an <img> that directly follows a <label> element that directly
  follows the input element with x attr that has been checked*/

.carousel input[name="slide_switch"]:checked + label + img {
 opacity   : 1;
 transform : scale(1);
}
/*clicking on any thumbnail now should activate the image related to it*/

/**************************  CAROUSEL STYLES END **************************/