学习编写一个轮播图，并尝试进行封装

        2021.11.08        星期一

 

        这周打算用html+css+js编写一个轮播图，我一开始编写的思路：先将三张图片的地址放入一个数组arr中，之后用DOM操作对他们进行赋值，当点击切换时，将数组里面的末尾去除，添加到arr的首位中。

           当我写好给导师查看了之后，说需要加一个过渡动画，且我这个思路并不能添加动画。所以重新继续进行思考。

        因为涉及到了动画，所以我便继续去复习了一下动画animation等知识，到最后，我写出来的效果是只有第2 和3图片可以切换还是没有达到预期的效果，所以打算明天和导师沟通一下，提供一些思路。

        之后将上个星期学的一些东西进行了总结，并写在了钉钉的流程图中

        2021.11.09 星期二

        今天继续完成轮播图的编写。早上先思考了一会，之后边和导师沟通了一下。本题编写的思路如下：在三张的图片的开头再放置3和2，在末尾处再加上1和2，使得在轮播的时候，当开头没有剩下的图片时，将这一组图片向前平移一段距离，此时，显示的仍然是那几张，从而达到无限轮播的效果。

        有了思路之后，便进行了编写。但一开始仍然不知道从哪里去下手，思考了许久，可以将开头两张照片放在屏幕的外面，用margin-left表示，末尾放右边外面，当需要轮播时，将这一组照片统一向一个方向进行位移。有了这个思路之后，边上网查询，得知可以用xxx.style.xxx增加样式，用数组的一些方法可以获取位移的具体值，从而进行操作。但还是没有达到