解析原生JS写轮播图

需求与分析

需求:
循环无缝自动轮播五张图,按左右箭头可以手动切换图片,鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片。鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来,鼠标移开时左右箭头隐藏掉并且自动轮播。
效果图: 继续阅读“解析原生JS写轮播图”

块级格式化上下文(BFC)的理解与应用

因为BFC特性的应用基于浮动较多,所以简单来回顾下浮动的要点:

浮动(float)

  • 浮动元素从常规流中脱离,被漂浮在容器(包含块)左边或右边
  • 浮动盒会一直漂到其外边缘挨到容器边缘或另外的浮动盒
  • 浮动元素不会影响到其后面的流内块级盒
  • 但是浮动元素后面的行级盒子会变短以避开浮动元素

继续阅读“块级格式化上下文(BFC)的理解与应用”