今天完成的事情：
1，css部分，任务14的轮播图做成简单的动画animation
2，js部分初步了解jquery
明天计划的事情：
学习js，继续任务2
遇到的问题：
1，任务14原先的轮播图的思路是写五个选择器，通过选择器之间的联系来实现图片的切换。
https://blog.csdn.net/hemyweb/article/details/79114896
<div class="photo" id="photo">
<!--第一个选择器-->
<input type="radio" name="btn" id="img1" checked />
<div class="control">
<div class="image"><img src="img1.png" /></div>
<div class="nav">
<label for="img5" class="up leftjianbian">
<</label> <label for="img2" class="down rightjianbian">>
</label>
</div>
</div>
<!--第二个选择器-->
<input type="radio" name="btn" id="img2" />
<div class="control">
<div class="image"><img src="img2.png" /></div>
<div class="nav">
<label for="img1" class="up leftjianbian">
<</label> <label for="img3" class="down rightjianbian">>
</label>
</div>
</div>
<!--第三个选择器-->
<input type="radio" name="btn" id="img3" />
<div class="control">
<div class="image"><img src="img3.png" /></div>
<div class="nav">
<label for="img2" class="up leftjianbian">
<</label> <label for="img4" class="down rightjianbian">>
</label>
</div>
</div>
<!--第四个选择器-->
<input type="radio" name="btn" id="img4" />
<div class="control">
<div class="image"><img src="img4.jepg" /></div>
<div class="nav">
<label for="img3" class="up leftjianbian">
<</label> <label for="img5" class="down rightjianbian">>
</label>
</div>
</div>
<!--第五个选择器-->
<input type="radio" name="btn" id="img5" />
<div class="control">
<div class="image"><img src="img5.jpg" /></div>
<div class="nav">
<label for="img4" class="up leftjianbian">
<</label> <label for="img1" class="down rightjianbian">>
</label>
</div>
</div>
<!-- 下面的五个点分别与五个选择器对应 -->
<div class="dots">
<label for="img1" class="dot" id="dot1"></label>
<label for="img2" class="dot" id="dot2"></label>
<label for="img3" class="dot" id="dot3"></label>
<label for="img4" class="dot" id="dot4"></label>
<label for="img5" class="dot" id="dot5"></label>
</div>
</div>
实际效果如下
这样能够用<>以及下面的点来实现图片的切换，但是只能通过手动去点击才能实现切换，图片不能自动轮播。
使用animation来实现图片自动轮换，这个很好理解。然后有一个animation step，也就是逐帧动画，这个比较难理解，根据这篇文章https://www.cnblogs.com/BATAKK/p/5301819.html
根据他的代码，简单做了一个demo
上面四个以及下面两个小人是可以动的，而且跟轮播图的自动轮换完全不一样。（这里也说不清楚哪里不一样，怎么附上动图啊..）
上面四个是因为第一个在第六帧执行完之后消失了，所以上面四个只能看见三个。这里详细的方法区别见上面链接的文章。
反正很长就对了，有各种方法的写法以及具体差别的介绍。最后
总结一下用法，直接默认写就行了。图片有多长(x)，不要计算距左侧的位置，直接最后background-position: -x 0;然后直接百分之百到这个位置。分几步就让n等于多少。参考上边的end时的用法或者默认状态下的用法
所以怎么简单怎么写..
2，简单了解jquery
选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素
id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：
class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下：
就凭这个，jquery永远是我的好朋友！
收获：
返回列表
评论