亚洲春色av无码专区校园,亚洲精品福利在线观看

純css就能實現(xiàn)可點擊切換的輪播圖，feel起來很絲滑

1前言
輪播圖經(jīng)常會在項目里用到，但是實際上用到的輪播圖都是比較簡單的，沒有復(fù)雜的特效，這個時候如果去引入swiper那些庫的話，未免就有點殺雞焉用牛刀了。

所以不如自己手寫一個，而今天我要分享的一種寫法也是我最近才發(fā)現(xiàn)的，發(fā)現(xiàn)寫起來真的是很絲滑，只純css就實現(xiàn)了呢！

可以先看看預(yù)覽效果

預(yù)覽地址：https://sunny-lucking.github.io/howToBuiMySwiper/myswiper.html

源碼地址：https://github.com/Sunny-lucking/howToBuiMySwiper/blob/main/myswiper.html

2HTML <label> 標簽的 for 屬性的用法及作用
for 屬性規(guī)定 label 與哪個表單元素綁定,label的for屬性要與綁定表單元素（input）的ID對應(yīng)。綁定完成后可以通過點擊label觸發(fā)表單元素的默認屬性。通俗的講就是你綁定完了點lebel就相當(dāng)于點擊表單元素（input）。

<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
3開始實現(xiàn)吧
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>我的輪播圖</title>
<style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    ul.slides {
      position: relative;
      width: 600px;
      height: 280px;
      list-style: none;
      margin: 0;
      padding: 0;
      background-color: #eee;
    }

    li.slide {
      margin: 0;
      padding: 0;
      width: inherit;
      height: inherit;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: Helvetica;
      font-size: 120px;
      color: #fff;
      transition: .5s transform ease-in-out;
    }

    .slide:nth-of-type(1) {
      background-color: #F2E205;
    }

    .slide:nth-of-type(2) {
      background-color: #F25C05;
      left: 100%;
    }
    .slide:nth-of-type(3) {
      background-color: #495F8C;
      left: 200%;
    }
</style>
</head>

<body>
<ul class="slides">
    <li class="slide">1</li>
    <li class="slide">2</li>
    <li class="slide">3</li>
</ul>
</body>

</html>

首先先寫了所需要的三個子元素。分別給了三種顏色。

接下來。最外層加上overflow: hidden,讓只顯示一個slide子元素

ul.slides {
      position: relative;
      width: 600px;
      height: 280px;
      list-style: none;
      margin: 0;
      padding: 0;
      background-color: #eee;
      overflow: hidden;
    }

接下來，加上label和input起到控制切換的效果

html

<body>
<ul class="slides">
    <input type="radio" id="control-1" name="control" checked>
    <input type="radio" id="control-2" name="control">
    <input type="radio" id="control-3" name="control">
    <li class="slide">1</li>
    <li class="slide">2</li>
    <li class="slide">3</li>
    <div class="controls-visible">
      <label for="control-1"></label>
      <label for="control-2"></label>
      <label for="control-3"></label>
    </div>
</ul>
</body>

css

input[type="radio"] {
position: relative;
z-index: 100;
display: none;
}

.controls-visible {
position: absolute;
width: 100%;
bottom: 12px;
text-align: center;
}

.controls-visible label {
display: inline-block;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
margin: 0 3px;
border: 2px solid #fff;
}

.slides input[type="radio"]:nth-of-type(1):checked ~ .controls-visible label:nth-of-type(1) {
background-color: #333;
}

.slides input[type="radio"]:nth-of-type(2):checked ~ .controls-visible label:nth-of-type(2) {
background-color: #333;
}

.slides input[type="radio"]:nth-of-type(3):checked ~ .controls-visible label:nth-of-type(3) {
background-color: #333;
}
這里利用input和label來模擬輪播圖的pagination分頁功能。label模擬的是圓點，然后把radio輸入框隱藏了。radio放在最前面的目的是為了用了控制后面的slides 和controls的樣式

現(xiàn)在實現(xiàn)點擊label切換輪播圖的效果

.slides input[type="radio"]:nth-of-type(1):checked ~ .slide {
transform: translatex(0%);
}

.slides input[type="radio"]:nth-of-type(2):checked ~ .slide {
transform: translatex(-100%);
}

.slides input[type="radio"]:nth-of-type(3):checked ~ .slide {
transform: translatex(-200%);
}

可以看到已經(jīng)非常地簡單就實現(xiàn)了點擊lebel切換輪播圖的效果。

當(dāng)然，我們要實現(xiàn)一個上下頁切換的功能也非常簡單

我們添加三組navigator，一頁頁面對應(yīng)一組

<body>
<ul class="slides">
    <input type="radio" id="control-1" name="control" checked>
    <input type="radio" id="control-2" name="control">
    <input type="radio" id="control-3" name="control">
    <div class="navigator slide-1">
      <label for="control-3">
        《
      </label>
      <label for="control-2">
        》
      </label>
    </div>

    <div class="navigator slide-2">
      <label for="control-1">
        《
      </label>
      <label for="control-3">
        》
      </label>
    </div>

    <div class="navigator slide-3">
      <label for="control-2">
        《
      </label>
      <label for="control-1">
        》
      </label>
    </div>
    <li class="slide">1</li>
    <li class="slide">2</li>
    <li class="slide">3</li>
    <div class="controls-visible">
      <label for="control-1"></label>
      <label for="control-2"></label>
      <label for="control-3"></label>
    </div>
</ul>
</body>
我們要把不屬于當(dāng)前的那一頁的navigator隱藏掉，所以用display:none，當(dāng)選中對應(yīng)的頁面的時候，再讓它顯示出來，所以可以這樣實現(xiàn)

    .navigator {
      position: absolute;
      top: 50%;
      transform: translatey(-50%);
      width: 100%;
      z-index: 100;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      display: none;
    }

    .navigator {
      font-size: 32px;
      color #333333;
    }

    .slides input[type="radio"]:nth-of-type(1):checked~.navigator:nth-of-type(1) {
      display: flex;
    }

    .slides input[type="radio"]:nth-of-type(2):checked~.navigator:nth-of-type(2) {
      display: flex;
    }

    .slides input[type="radio"]:nth-of-type(3):checked~.navigator:nth-of-type(3) {
      display: flex;
    }

可以看到，又輕而易舉就實現(xiàn)了點擊切換上下頁的功能，太膩害了。

作者：事業(yè)有成的張啦啦

歡迎關(guān)注微信公眾號：前端陽光

在线午夜精品自拍小视频_无码av无码专区线_亚洲无码精品人妻_人人澡欧美一区

前端