今天完成的事
1，重构完任务八所有页面；
2，发现有兼容性更好的实现轮播图方法，故采用新的样式；
关键代码css
@mixin carousel-position {
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: center;
}
.mycarousel {
position: relative;
}
input {
display: none;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
// animation: carousel 8s infinite;
}
.carousel-item {
position: relative;
display: none;
float: left;
width: 100%;
margin-right: -100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: -webkit-transform .6s ease-in-out;
transition: transform .6s ease-in-out;
transition: transform .6s ease-in-out,-webkit-transform .6s ease-in-out;
}
.d-block {
display: block!important;
}
.w-100 {
width: 100% !important;
}
.carousel-item img {
vertical-align: middle;
}
.carousel-choose-dot {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
}
.dot {
display: inline-block;
margin: 10px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #999;
}
.carousel-pre,
.carousel-next {
@include carousel-position;
}
#a1:checked ~ .carousel-inner .img1,
#a2:checked ~ .carousel-inner .img2,
#a3:checked ~ .carousel-inner .img3 {
display: block;
}
#a1:checked ~ .carousel-choose-dot .b1,
#a2:checked ~ .carousel-choose-dot .b2,
#a3:checked ~ .carousel-choose-dot .b3 {
background-color: #fff;
}
.carousel-pre label,
.carousel-next label {
display: none;/*不显示*/
width: 1rem;
height: 1rem;
border-top: .5rem solid #999;
border-right: .5rem solid #999;
transform: rotate(-135deg);
}
.carousel-next label {
transform: rotate(45deg);
}
#a1:checked ~ .carousel-pre label:nth-of-type(3),
#a2:checked ~ .carousel-pre label:nth-of-type(1),
#a3:checked ~ .carousel-pre label:nth-of-type(2) {
position: relative;
left: 10vw;
display: inline-block;
}
#a1:checked ~ .carousel-next label:nth-of-type(2),
#a2:checked ~ .carousel-next label:nth-of-type(3),
#a3:checked ~ .carousel-next label:nth-of-type(1) {
position: relative;
left: 90vw;
display: inline-block;
}
明天的计划
1，学习javascript高级程序设计的3，4章；
2，开始js任务一；
遇到的问题
重构任务三时发现其标题偏高导致整个布局有些杂乱，后调试后发现未为其设置margin-top：0；仔细排查问题点的所在会让问题解决更快，反之， 会过于浪费时间；
收获
1，使用另一种兼容性更好的轮播图实现办法；
在原本的实现办法中，单纯的将图片浮动排列在一行，图片的直接父项也会设置为图片的3倍宽，虽然简单，但某些浏览器上会现body设置overflow：hidden；后浏览器窗口被“卡”住无法拖动的情况，即使单独测试时没有问题，但一放入比较复杂的页面中会导致其他问题；所以本次采用如上图中，让图片与直接父项容器一样宽，并设置display：none；隐藏图片，在与input：checked 效果相联系将图片容器设置为display：block；即可实现图片的手动轮播；
返回列表
评论