纯css两种轮播效果的实现

由于上传视频失败，只能放图片了

自动轮播

html部分

div <div class="div1_1">    

     <div class="div1">

         <img src=".\images\7270.jpg" alt="">

         <img src="images\buwangchuxin2.jpg" alt="">

          <img src="images\buwangchuxinzhuti.jpg" alt="">

     </div>

</div>

css部分

.div1{    position: relative;    width: 300vw;    overflow: hidden;    animation: carousel 9s linear 0s infinite normal none;}

.div1_1{    position: relative;    overflow: hidden;}

div img{    position: relative;    width: 100vw;    float: left;}

@keyframes carousel{    0%{        left: -0vw;    }    20%{        left: -0vw;    }    40%{        left: -100vw;    }    60%{        left: -100vw;    }    80%{        left: -200vw;    }    100%{        left: -200vw;    }}

手动轮播

html部分

<div>

        <div class="div5_1">              <input class="sr" type="radio" name="div5_1" id="A" checked="checked">                        <input class="sr" type="radio" name="div5_1" id="B">                        <input class="sr" type="radio" name="div5_1" id="C">                        <div class="controus">                                                     <label class="xingzhuang back" for="C"></label>                      <label class="xingzhuang ford" for="B"></label>                                                  </div>

            <div class="controus">                                                     <label class="xingzhuang back" for="A">    </label>                                                          <label class="xingzhuang ford" for="C"></label>                                                  </div>

            <div class="controus">                                                     <label class="xingzhuang back" for="B">    </label>                                                           <label class="xingzhuang ford" for="A"></label>                                                  </div>

            <div class="track">                                                                                                                    <li class="slide"><h1>A</h1>    </li>                                                                                   <li class="slide"><h1>B</h1>    </li>                                                                                   <li class="slide"><h1>C</h1>    </li>                                                                            </div>                                

     </div>   

</div> 

css部分

.div5_1{  position: relative;  height: 300px;  width: 400px;  overflow: hidden; }

.controus,.sr{  display: none;}

.xingzhuang{  height: 30px;  width: 30px;  top: 50%;  position: absolute;  display: block;  cursor: pointer;  border-width: 5px 5px 0 0;  border-style: solid;  border-color: #fafafa;  opacity: 0.35;  z-index: 3;}

.xingzhuang:hover{  opacity: 1;}

.back{  left: 10px;  transform: rotate(-135deg);}

.ford{  right: 10px;  transform: rotate(45deg);}

.track{  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  transition: all 0.5s;}

.slide{  display: block;  /* top: 0; */  left: 0;  right: 0;  /* bottom: 0; */  opacity: 1;  height: 100%;  position: absolute;  overflow-y: auto;}

.slide:nth-of-type(1){  background-color: green;  transform: translateX(0%);}

.slide:nth-of-type(2){  background-color: greenyellow;  transform: translateX(100%);}

.slide:nth-of-type(3){  background-color: red;  transform: translateX(200%);}

.sr:nth-of-type(1):checked ~ .track{  transform: translateX(-0%);}

.sr:nth-of-type(2):checked ~ .track{  transform: translateX(-100%);}

.sr:nth-of-type(3):checked ~ .track{  transform: translateX(-200%);}

.sr:nth-of-type(1):checked ~ .controus:nth-of-type(1){  display: block;  opacity: 1;}

.sr:nth-of-type(2):checked ~ .controus:nth-of-type(2){  display: block;  opacity: 1;}

.sr:nth-of-type(3):checked ~ .controus:nth-of-type(3){  display: block;  opacity: 1;}