这是我参与「第四届青训营 」笔记创作活动的第2天

跟着月影老师学习JavaScript~

实例一 设置页面浏览模式

版本一

操作body中的style（直接操作了CSS），JavaScript执行了CSS中的内容，没有实现“各司其责”，不利于理解代码

版本二

更易于理解，符合“各司其责”的原则，前端工程师常用

版本三

使用CSS的高级功能——伪类选择器，直接使用CSS、HTML完成。

• 添加一个checkbox，当被选中时（伪类），内容区域的CSS将按照设置变为深色模式
• 隐藏了checkbox，使用label标签，for元素设置一个checkbox，点击label将等同于点击checkbox

结论

组件封装

轮播图

HTML（结构）

• 先在用html中使用无序列表放入图片，给图片设置同一个class（第一张图片除外）

    <div id="my-slider" class="slider-list">
      <ul>
        <li class="slider-list__item--selected">
          <img src="https://p5.ssl.qhimg.com/t0119c74624763dd070.png">
        </li>
        <li class="slider-list__item">
          <img src="https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg">
        </li>
        <li class="slider-list__item">
          <img src="https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg">
        </li>
        <li class="slider-list__item">
          <img src="https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg">
        </li>
      </ul>
    </div>

CSS（表现）

• 使用 CSS 绝对定位将图片重叠在同一个位置
• 轮播图切换的状态使用修饰符（modifier）
• 轮播图的切换动画使用 CSS transition

#my-slider{
 position: relative;
 width: 790px;
}

.slider-list ul{
 list-style-type:none;
 position: relative;
 padding: 0;
 margin: 0;
}

.slider-list__item,
.slider-list__item--selected{
 position: absolute;
 transition: opacity 1s;
 opacity: 0;
 text-align: center;
}

.slider-list__item--selected{
 transition: opacity 1s;
 opacity: 1;
}

JS（行为）

• 先获取元素放入items
• 判断当前元素是items中的第几个元素
• slideTo()实现元素状态的切换
• slideNext()、slidePrevious()实现前后元素切换
• setInterval实现轮播

        class Slider{
            constructor(id){
              this.container = document.getElementById(id);
              this.items = this.container
              .querySelectorAll('.slider-list__item, .slider-list__item--selected');
            }
            getSelectedItem(){
              const selected = this.container
                .querySelector('.slider-list__item--selected');
              return selected
            }
            getSelectedItemIndex(){
              return Array.from(this.items).indexOf(this.getSelectedItem());
            }
            slideTo(idx){
              const selected = this.getSelectedItem();
              if(selected){ 
                selected.className = 'slider-list__item';
              }
              const item = this.items[idx];
              if(item){
                item.className = 'slider-list__item--selected';
              }
            }
            slideNext(){
              const currentIdx = this.getSelectedItemIndex();
              const nextIdx = (currentIdx + 1) % this.items.length;
              this.slideTo(nextIdx);
            }
            slidePrevious(){
              const currentIdx = this.getSelectedItemIndex();
              const previousIdx = (this.items.length + currentIdx - 1)
                % this.items.length;
              this.slideTo(previousIdx);  
            }
          }
          const slider = new Slider('my-slider');
          setInterval{{}=>{
            slider.slideNext();
          },2000};

行为：控制流

• 使用自定义事件来耦合（组建状态和图片状态）

html中加入如下：

 <a class="slide-list__next"></a>
  <a class="slide-list__previous"></a>
  <div class="slide-list__control">
    <span class="slide-list__control-buttons--selected"></span>
    <span class="slide-list__control-buttons"></span>
    <span class="slide-list__control-buttons"></span>
    <span class="slide-list__control-buttons"></span>
  </div>

JS修改：

• 鼠标放在小圆点上时，切换到该序号的图片
• 鼠标移到图片上，停止自动播放
• 鼠标离开的时候自动播放

slideTo中加入：

 const detail = {index: idx}
  const event = new CustomEvent('slide', {bubbles:true, detail})
  this.container.dispatchEvent(event)