今天完成的事：学会了使用css写轮播图；不过定时器还没学懂，写了任务14的第一个页面
明天要完成的事：继续任务14；并且学习定时器的相关知识；
难题：轮播图的2侧按钮想了好久写起来还是错了关联还好；主要还是2侧按钮花时间；而且有时候出错根本不知道错哪了每次都要花好久时间去试；对轮播图之前有尝试直接用css写不过当时不会；拿着木很久；
不过每次都要花时间试错很耗时间
另外要注意轮播图的引用容易出问题；轮播图2侧尤其要小心稍微改一点就会出错；
收获：学会了轮播图的css写法；丰富了自己的组件库；less有一次开始尝试使用函数不过确实不这么容易；
百度了好久还摸不着头脑；之前也看过js的函数不过还是不找怎么下手每次用新东西都这样；
先把任务写完；
在组件库里存了2种轮播图的方法：
#box {
width: 100%;
/*超出部分隐藏*/
overflow : hidden;
position : relative;
text-align: center;
font-size : 0;
label {
width : 15px;
height : 15px;
border-radius: 50%;
border : 1px solid white;
position : absolute;
bottom : 40px;
z-index : 2;
}
.list {
margin : 0;
padding : 0;
list-style: none;
width : 300%;
position : absolute;
position : relative;
transition: .5s;
li {
float : left;
width : 33.333%;
max-height: 600px;
img {
width: 100%;
}
}
}
input {
display: none;
}
/*设置每个圆圈的位置*/
input:checked+label {
background: #29b078;
}
label:nth-of-type(1) {
left: 48%;
}
label:nth-of-type(2) {
left: 50%;
}
label:nth-of-type(3) {
left: 52%;
}
/*选中移动ul*/
input:nth-of-type(1):checked~ul {
left: 0;
}
input:nth-of-type(2):checked~ul {
left: -100%;
}
input:nth-of-type(3):checked~ul {
left: -200%;
}
.bn_arrows-left label {
display : inline-block;
width : 27px;
height : 47px;
line-height: 47px;
border : none;
background : url(../img/snajiao.png) no-repeat;
position : absolute;
top : 50%;
left : 11.718%;
cursor : pointer;
display: none;
}
.bn_arrows-right label {
display : inline-block;
width : 27px;
height : 47px;
line-height: 47px;
border : none;
background : url(../img/photo3.png) no-repeat;
position : absolute;
top : 50%;
left : 88.282%;
cursor : pointer;
display: none;
}
input:nth-of-type(1):checked~.bn_arrows-right label:nth-of-type(2),
input:nth-of-type(1):checked~.bn_arrows-left label:nth-of-type(3) {
display: inline-block;
}
input:nth-of-type(2):checked~.bn_arrows-right label:nth-of-type(3),
input:nth-of-type(2):checked~.bn_arrows-left label:nth-of-type(1) {
display: inline-block;
}
input:nth-of-type(3):checked~.bn_arrows-right label:nth-of-type(1),
input:nth-of-type(3):checked~.bn_arrows-left label:nth-of-type(2) {
display: inline-block;
}
}
<div id="box">
<input checked type="radio" name="pic" id="one">
<label for="one"></label>
<input type="radio" name="pic" id="twe">
<label for="twe"></label>
<input type="radio" name="pic" id="three">
<label for="three"></label>
<ul class="list">
<li> <img src="../img/photo.png" alt=""></li>
<li><img src="../img/photo.png" alt=""></li>
<li><img src="../img/photo.png" alt=""></li>
</ul>
<div class="bn_arrows-left">
<label for="one"></label>
<label for="twe"></label>
<label for="three"></label>
</div>
<div class="bn_arrows-right">
<label for="one"></label>
<label for="twe"></label>
<label for="three"></label>
</div>
</div>
这个是自己写的；不过效果不是很理想；没能做到无缝连接；
今天大部分时间在码代码；没能学新东西
返回列表
评论