【纯css轮播图，怎么完成。】

纯css轮播图，怎么完成。

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

详细描述

截图

代码

body{
}
/*轮播图样式*/
ul,li{
  list-style: none;
  padding: 0;
}

/*css public start*/
.floatfix {
  *zoom: 1;
}
.floatfix:after {
  content: "";
  display: table;
  clear: both;
}
/*css public end*/

/*slider start*/
.slider-contaner{
  width:100%;
  position:relative;
}
.slider-item + .slider-item{
  opacity:0;
}
.slider-item{
  width:100%;
  position:absolute;
  animation-timing-function: linear;
  animation-name:fade;
  animation-iteration-count: infinite;
  background-size:100%;
  background-repeat: no-repeat;
}
.focus-container{
  position:absolute;
  z-index:7;
  margin:0 auto;
  left:0;
  right:0;
}
.focus-container li{
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  float: left;
  margin: 0 .05rem;
  background: #fff;
}
.focus-item{
  width:100%;
  height:100%;
  border-radius:inherit;
  animation-timing-function: linear;
  animation-name:fade;
  animation-iteration-count: infinite;
}
.focus-item2,.focus-item3,.focus-item4,.focus-item5{
  opacity:0;
}
/*设置轮播焦点的位置*/
.focus-container{
  bottom:2%;
  display: flex;
  justify-content: center;
}
/*设置当前图片焦点的颜色*/
.focus-item{
  background:#51B1D9;
}
/*设置动画，请根据实际需要修改秒数*/
.slider-item,.focus-item{
  animation-duration: 20s;
}
.slider-item1,.focus-item1{
  animation-delay: -1s;
}
.slider-item2,.focus-item2{
  animation-delay: 3s;
}
.slider-item3,.focus-item3{
  animation-delay: 7s;
}
.slider-item4,.focus-item4{
  animation-delay: 11s;
}
.slider-item5,.focus-item5{
  animation-delay: 15s;
}
@keyframes fade{
  0%{
    opacity:0;
    z-index:2;
  }
  5%{
    opacity:1;
    z-index: 1;
  }
  20%{
    opacity:1;
    z-index:1;
  }
  25%{
    opacity:0;
    z-index:0;
  }
  100%{
    opacity:0;
    z-index:0;
  }
}
/*设置背景，响应式请利用媒体查询根据断点修改路径*/
.slider-item1{
  background-image:url(../img/task8-1.12.png);
}
.slider-item2{
  background-image:url(../img/task8-1.13.png);
}
.slider-item3{
  background-image:url(../img/task8-1.14.png);
}
.slider-item4{
  background-image:url(../img/task8-1.12.png);
}
.slider-item5{
  background-image:url(../img/task8-1.13.png);
}
/*设置图片的高度，请根据具体需要修改百分比，响应式及时修改此值*/
.slider,.slider-item{
  padding: 0;
  padding-bottom:30%;
}

.banner-arrow {
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 40%;
}
.banner-left {
  width: 20px;
  height: 38px;
  background-image: url(../img/task14-1left.png);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 999;
  /* text-align: center; */
  margin-left: 20px;
}
.banner-right {
  width: 20px;
  height: 38px;
  background-image: url(../img/task14-1right.png);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 999;
  margin-right: 20px;
}

/*轮播图样式*/
.list{
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  padding-left: 30px;
  padding-right: 30px;
}

编辑于2024-11-23

时间排序

热门排序

[上海|结业弟子]JS-燕赤霞
0

可以利用input标签与lable标签组合实现banner图的切换。
<label> 标签为 input 元素定义标签（label）。
label 元素不会向用户呈现任何特殊的样式。不过，它为鼠标用户改善了可用性，因为如果用户点击 label 元素内的文本，则会切换到控件本身。
<label> 标签的 for 属性应该等于相关元素的 id 元素，以便将它们捆绑起来。
input标签有个checked属性，当lable属性绑定后，选中lable即可选中input标签。

隐藏input，因为这里我们只需用到input的checked属性。选中lable时，与之绑定的Input也会处于checked状态，这样，我们只需利用checked属性加上伪类选择器。就可以实现banner图的切换。由于定位的原因，会使后面的图盖住前面的图，所以需要设置z-index使图片上去.

但是好像用这种方法，能点击，就不能自动轮播了。

效果图如下：（祖传的天仙照片都贡献出来了）
demo代码如下：
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
label {
cursor: pointer;
display: inline-block;
opacity: 0.3;
height: 70px;
width: 70px;
margin-top: 100px;
background-color: red;
}
label:hover{
opacity: 1;
}
input{
display:none;
}
ul{
list-style: none;
padding: 0px;
height: 499px;
width: 375px;
overflow: hidden;
margin-left: 480px;
position: relative;
}
img {
width: 100%;
}
.set_page1:checked ~.photo ul li:nth-child(1){
position: absolute;
top: 0px;
z-index: 25;
}
.set_page2:checked ~.photo ul li:nth-child(2){
position: absolute;
top: 0;
z-index: 22;
}
.set_page3:checked ~.photo ul li:nth-child(3){
position: absolute;
top: 0;
z-index: 23;
}
.set_page4:checked ~.photo ul li:nth-child(4){
position: absolute;
top: 0;
z-index: 24;
}

.set_page5:checked ~.photo ul li:nth-child(5){
position: absolute;
top: 0;
}

</style>
</head>

<body>
<div class="main">
<input type="radio" name="p" id="name1" class="set_page1" />
<input type="radio" name="p" id="name2" class="set_page2" />
<input type="radio" name="p" id="name3" class="set_page3" />
<input type="radio" name="p" id="name4" class="set_page4" />
<input type="radio" name="p" id="name5" class="set_page5" />


<label for="name1" class="c1"></label>
<label for="name2" class="c2"></label>
<label for="name3" class="c3"></label>
<label for="name4" class="c4"></label>
<label for="name5" class="c5"></label>

<div class="photo">
<ul>
<li class="li1">
<img src="../yifei_cc/9.jpg" />
</li>
<li>
<img src="../yifei_cc/5.jpg" />
</li>
<li>
<img src="../yifei_cc/9.jpg" />
</li>
<li>
<img src="../yifei_cc/7.jpg" />
</li>
<li>
<img src="../yifei_cc/9.jpg" />
</li>
</ul>
</div>
</div>

</body>

</html>

查看全部>

编辑于2018-09-28

去第页

可以利用input标签与lable标签组合实现banner图的切换。