今日完成：

解决了下关于那个手动 轮播图无缝的问题：

最后三张图变五张图了：

<div class="wrap">
    <img src="../img/banner4.jpeg" alt=".">
    <img src="../img/banner_02.jpg" alt="">
    <img src="../img/banner3.png" alt=".">
    <img src="../img/banner4.jpeg" alt=".">
    <img src="../img/banner_02.jpg" alt="">
</div>

这个无缝轮播其实也是伪无缝，都是障眼法。与自动无缝轮播一样，不过就是多了个向左的方向。

但使用input单选框来做这个手动无缝会出现一个问题

因为每个单选框都与一段动画绑定，所以要给它再加上一段额外的动画来解决这个无缝的问题，就会产生冲突。

比如说：

从第三张图切换到第一张图，要实现无缝，#p1:checked就要变成下面这样

#p1:checked ~ .wrap {
  animation: loop 1s linear;
}

@keyframes loop {
  0% {
    left: -300vw;
  }
  90% {
    left: -400vw;
  }
  99.9999% {
    left: -400vw;
  }
  100% {
    left: -100vw;
  }
}

这时从第二张图切换到第一张图时就会出现问题：

#p2:checked ~ .wrap {
  left: -200vw;
  transition: 1s linear;
}

从代码中就可以看出一个起始位置是-200vw ,一个是-300vw.会产生断裂。刚填上那个缝，又来了个缝。

而且上面这个#p1:checked的动画是没有问题的，要解决第一个缝，在现有的代码基础上，这是唯一的方法了。

再看看之前的#p1:checked状态下图片动画是怎么设置的：

#p1:checked ~ .wrap {
  left: -100vw;
  transition: 1s linear;
}

可以根据触发#p1:checked的那个lable的是左切换按钮还是右切换按钮,来设置不同的动作。

如果是右切换按钮点击的lable，说明它是要从第三张图切换到第一张图。那就给它设置animation动作。

如果是左切换按钮点击的lable，那它就是要从第二张图切换到第一张图。那就给它设置transition动作。

如何实现上面这个想法。尝试了很久，css看来是解决不了。使用js倒是很简单：

<div class="icon-right">
    <label for="p1" onclick="right()"></label>
    <label for="p2""></label>
    <label for="p3"></label>
</div>

给右切换按钮下与id=p1绑定的Label设置点击事件。

点击之后：

function right() {
    var a = document.getElementById('p1');
    a.className='right';
}

给#p1的input加上一个right类，这个类仅起标识作用。

#p1:checked[class='right'] ~ .wrap {
  animation: loop 1s linear;
}

#p1:checked ~ .wrap {
  left: -100vw;
  transition: 1s linear;
}

当#p1:checked带有这个right类时，就会使用animation动画完成障眼法，完成无缝效果。

不带right类时，恢复正常的动作（使用过渡），这样第二张图片切换到第一张就不会出现问题了。

当然，第一张图切换到第三张与上面类似。

测试下，还是有一点问题。因为通过js给input标记后，这个标记会一直存在。

我们需要的是标记之后，完成切换动作，这个标记就没用了，作废掉。

因为对js也不太熟悉，所有用了下面的方法来清除作废标记：

首先给中间的#p2的lable添加点击事件：

<label for="p2" onclick="remove()"></label>

相关函数：

function remove() {
    var a = document.getElementById('p1');
    var b = document.getElementById('p3');
    a.classList.remove('right');
    b.classList.remove('left');
}

看下效果：

明日计划：

明天请假一天

后天开始js任务