面试官:给爷手撕个轮播图吧

1,904 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第2天,点击查看活动详情

引言

这两年大环境不太好,前端面试难度也呈现了指数级增长,面试官一上来就让我手撕这,手撕那。我tm手撕你吧。我一天没事干去某牛招聘网站上看面筋,意外发现一个应届生吐槽面试官让他手撕轮播图。我顿时一惊,感觉自己不能写出来。于是乎我就自己赶紧去整理一番啊,希望大家也引以为戒,多多提示个人软实力与硬实力。

功能拆解

3.gif

为了不进行长篇论述,此处我只设计一个小而精的轮播图。它包含的功能主要有下面两个,其它细节大佬们自己补充。

  • 自动轮播

  • 左右控制

代码介绍

演示地址

核心介绍

html和css

<div id="app">
    <ul>
      <li class="actived"><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b9fb2064d74e4bc482a2119cf61069fb~tplv-k3u1fbpfcp-zoom-1.image" alt=""></li>
      <li><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/131c491b37a84c11a76d1e3f965325b2~tplv-k3u1fbpfcp-zoom-1.image" alt=""></li>
      <li><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ee544a0b2f6e4e94a899b8d14dfc4459~tplv-k3u1fbpfcp-zoom-1.image" alt=""></li>
    </ul>
    
    
    <!--左右控制-->
    <div class="direction">
      <div class="left"><</div>
      <div class="right">></div>
    </div>
</div>

css部分代码过长,而且没什么营养,就是使用了绝对定位让图片盒子们先重叠一起,然后让所有未轮播的图片隐藏,让当前轮播展示的图片显示出来。

js部分

class Swipers {
  constructor (delay) {
    this.items = document.querySelectorAll("ul>li")//所有的图片元素盒子
    this.index = 0//当前选中的元素
    this.timer = null//定时器控制
    this.delay = delay//轮播时长
    this.left = document.querySelector(".left")//左控件
    this.right = document.querySelector(".right")//右控件
    this.run()//开始启动
  }
  
  //方向控制
  directControl(direction) {
    let item = this.items[this.index] 
    item.removeAttribute("class",'actived')
    if(direction==='left') {
      if(this.index===0) this.index = this.items.length-1
      else this.index--
    } else {
      if(this.index===this.items.length-1) this.index = 0
      else this.index++
    }
    let newItem = this.items[this.index] 
    newItem.setAttribute("class",'actived')
  }


  //开始执行
  run() {
    this.left.addEventListener("click",()=>{
      this.directControl("left")
    })
    this.right.addEventListener("click",()=>{
      this.directControl("right")
    })
    this.timer = setInterval(() => {
      //上一次的显示取消类
      let item = this.items[this.index] 
      console.log(item)
      item.removeAttribute("class",'actived')
      if(this.index===this.items.length-1) this.index = 0
      else this.index++
      let newItem = this.items[this.index] 
      newItem.setAttribute("class",'actived')
    }, this.delay);
  }

  //停止执行
  stop() {
    clearInterval(this.timer)
  }
}

let s = new Swipers(3000)

为什么要设计一个类?因为类的功能设计可以很好的拆解和管理设计需求,无论在面试还是实际开发中都可以使用类很好的封装一个具体的应用。

  • 构造函数,首先在构造函数传递一个参数,当然此处也可以传递两个,一个是定时器的时长,另一个是绑定的盒子。此处我为了简单就传递一个定时器时长参数。构造函数内部添加多个属性,如下

    1. index:标记当前轮播的位置
    2. timer:全局定时器控制
    3. delay:定时器延时时间
    4. items:所有的图片容器
    5. left:控制向左滑动
    6. right:控制向右滑动
  • directControl,此方法主要是左右控制轮播图的滑动切换功能,设计比较简单,点击左滑或者右滑动时灵活的控制当前index改变和当前激活图片的显示。

  • run,此方法是核心,添加全局定时器控制整个轮播图的自动轮播,并同步改变位置index和激活样式

  • stop,此方法就是关闭定时器的功能。

总结

大家多多批评,多多指正。谢谢。