JavaScript （1）｜青训营笔记这是我参与「第四届青训营」笔记创作活动的第3天还是先说一下项目相关的事情，

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

还是先说一下项目相关的事情，昨天没课，我们组讨论了项目的决定，因为昨天已经26号了，我们查阅了2天的资料，感觉项目一难度最大，但是知识点我们是大概理解的，知道是干嘛的，我们也想着锻炼一下自己，看看自己的实力，而且我们团队还是比较友好的，约定的9点半开会，大家都到了，但是有一些小伙伴就是不好意思多说话，但是都是想把项目做好的！让我们努力吧！

接下来讲一下今天看月影大佬的讲课记下的部分笔记！用于提高和回顾！

JavaScriptJavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。是在标签**<script>**进行书写，最后可以实现一些互动效果等功能，使网页更加灵活。

HTML/CSS/JS 各司其责，下面拿轮播图来举例说明：

- HTML：主要是做整体结构

<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>

<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>

- 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;
  }

JavaScript：主要是控制行为，例如轮播

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');
  slider.slideTo(3);