想写个纯CSS无缝轮播,包含轮播焦点点击轮播功能、左右按钮点击轮播功能、最后轮播焦点和图片自动轮播、鼠标悬停下轮播焦点和图片自动轮播停止...
我就是想用纯CSS写js的轮播功能,尽管没什么实用...
我的代码结构如下
<div class="outer">
<div class="test">
<input type="radio" name="slides" id="slide1" checked>
<input type="radio" name="slides" id="slide2">
<input type="radio" name="slides" id="slide3">
<input type="radio" name="slides" id="slide4">
<input type="radio" name="slides" id="slide5">
<input type="radio" name="slides" id="slide6">
<input type="radio" name="slides" id="slide7">
<ul class="slideWrap">
<li class="slide slide-1"></li>
<li class="slide slide-2"></li>
<li class="slide slide-3"></li>
<li class="slide slide-4"></li>
<li class="slide slide-5"></li>
<li class="slide slide-6"></li>
<li class="slide slide-7"></li>
</ul>
<div class="side-controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
<label for="slide5"></label>
<label for="slide6"></label>
<label for="slide7" style="display: none;"></label>
</div>
<div class="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
<label for="slide5"></label>
<label for="slide6"></label>
<label for="slide7" style="display: none;"></label>
</div>
</div>
</div>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
font-size: 24px;
font-family: Cursive;
}
.outer{
width: 1000px;
height: 600px;
margin: 50px auto;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: space-evenly;
background-color: #EFEFEF;
box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}
.test{
width: 900px;
height: 500px;
overflow: hidden;
position: relative;
border-radius: 10px;
border: 10px solid;
clip-path: inset(0px round 10px);
border-image: linear-gradient(45deg,#EACCF8,#ee9ca7,#69EACB) 1;
}
.slideWrap{
width: 700%;
height: 100%;
position: relative;
transition: transform 0.1s ease;
}
.slide{
float: left;
width: 900px;
height: inherit;
}
.slide-1{
background: url("qq截图/lyf1.jpg") no-repeat 0 0 / 100% 100%;
}
.slide-2{
background: url("qq截图/lyf2.jpg") no-repeat 0 0 / 100% 100%;
}
.slide-3{
background: url("qq截图/lyf3.jpg") no-repeat 0 0 / 100% 100%;
}
.slide-4{
background: url("qq截图/lyf4.jpg") no-repeat 0 0 / 100% 100%;
}
.slide-5{
background: url("qq截图/lyf-5.jpg") no-repeat 0 0 / 100% 100%;
}
.slide-6{
background: url("qq截图/lyf-6.jpg") no-repeat 0 0 / 100% 100%;
}
.slide-7{
background: url("qq截图/lyf1.jpg") no-repeat 0 0 / 100% 100%;
}
input{
display: none;
}
.controls {
left: 50%;
bottom: 10px;
display: flex;
position: absolute;
transform: translateX(-50%);
}
.controls label {
height: 10px;
width: 30px;
margin: 0 10px;
cursor: pointer;
background-color: #fff;
transition: background-color .5s;
}
.controls label:hover{
background-color: rgba(255,0,0,0.3);
}
#slide1:checked ~ .controls label:nth-of-type(1),
#slide2:checked ~ .controls label:nth-of-type(2),
#slide3:checked ~ .controls label:nth-of-type(3),
#slide4:checked ~ .controls label:nth-of-type(4),
#slide5:checked ~ .controls label:nth-of-type(5),
#slide6:checked ~ .controls label:nth-of-type(6),
#slide7:checked ~ .controls label:nth-of-type(7),
#slide7:checked ~ .controls label:nth-of-type(1){
background-color: red;
}
#slide1:checked ~ .slideWrap{
transform: translateX(0px);
}
#slide2:checked ~ .slideWrap{
transform: translateX(-900px);
}
#slide3:checked ~ .slideWrap{
transform: translateX(-1800px);
}
#slide4:checked ~ .slideWrap{
transform: translateX(-2700px);
}
#slide5:checked ~ .slideWrap{
transform: translateX(-3600px);
}
#slide6:checked ~ .slideWrap{
transform: translateX(-4500px);
}
#slide7:checked ~ .slideWrap{
transform: translateX(-5400px);
}
.side-controls label {
position: absolute;
width: 24px;
height: 44px;
top: 50%;
margin-top: -15px;
cursor: pointer;
opacity: .7;
transition: opacity .5s;
}
.side-controls label:hover{
opacity: 1;
}
#slide7:checked ~ .side-controls label:nth-of-type(2),
#slide2:checked ~ .side-controls label:nth-of-type(1),
#slide3:checked ~ .side-controls label:nth-of-type(2),
#slide4:checked ~ .side-controls label:nth-of-type(3),
#slide5:checked ~ .side-controls label:nth-of-type(4),
#slide6:checked ~ .side-controls label:nth-of-type(5),
#slide7:checked ~ .side-controls label:nth-of-type(6),
#slide1:checked ~ .side-controls label:nth-of-type(6){
left: 0;
background: url("images/left.png") ;
}
#slide1:checked ~ .side-controls label:nth-of-type(2),
#slide2:checked ~ .side-controls label:nth-of-type(3),
#slide3:checked ~ .side-controls label:nth-of-type(4),
#slide4:checked ~ .side-controls label:nth-of-type(5),
#slide5:checked ~ .side-controls label:nth-of-type(6),
#slide6:checked ~ .side-controls label:nth-of-type(7),
#slide6:checked ~ .side-controls label:nth-of-type(1),
#slide7:checked ~ .side-controls label:nth-of-type(2){
right: 0;
background: url("images/right.png");
}
</style>
渲染结果如下
gif原图太大,上传不能超过5M,所以压缩了画质请忽略
无缝轮播label和input按钮我不怎么懂样式如此设置,过渡时间只能设置很短,不然不是无缝效果,关键是我不知道怎么设置input选中后的左边的按钮样式
也就是下面的样式该如何设置啊,主要是为了无缝轮播不然就知道,一旦加上最后一张和第一张相同的图片就糊了不知道该如何对应了
#slide7:checked ~ .side-controls label:nth-of-type(2),
#slide2:checked ~ .side-controls label:nth-of-type(1),
#slide3:checked ~ .side-controls label:nth-of-type(2),
#slide4:checked ~ .side-controls label:nth-of-type(3),
#slide5:checked ~ .side-controls label:nth-of-type(4),
#slide6:checked ~ .side-controls label:nth-of-type(5),
#slide7:checked ~ .side-controls label:nth-of-type(6),
#slide1:checked ~ .side-controls label:nth-of-type(6){
left: 0;
background: url("images/left.png") ;
}
#slide1:checked ~ .side-controls label:nth-of-type(2),
#slide2:checked ~ .side-controls label:nth-of-type(3),
#slide3:checked ~ .side-controls label:nth-of-type(4),
#slide4:checked ~ .side-controls label:nth-of-type(5),
#slide5:checked ~ .side-controls label:nth-of-type(6),
#slide6:checked ~ .side-controls label:nth-of-type(7),
#slide6:checked ~ .side-controls label:nth-of-type(1),
#slide7:checked ~ .side-controls label:nth-of-type(2){
right: 0;
background: url("images/right.png");
}
我改变HTML结构,不再添加同第一张图片到末尾,同样去掉最后input和label,发现过渡时间短也能起到无缝轮播效果
gif一压缩,小龙女的嘴唇都变色了...