如何使用JS实现一个轮播组件

要求:使用原生JS实现一个轮播组件。


html

.wrapper相当于视口,它的大小为一张图片的大小。
.item-wrapper包裹起所有的图片。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>slider</title>
</head>
<body>
  <div class="wrapper">
    <div class="item-wrapper"></div>
  </div>
</body>
</html>


css

.item-wrapper利用display:flex将所有的图片排列在一行,之后就可以通过transform移动整个.item-wrapper以达到在视觉上轮播的效果。

*{
  box-sizing: border-box;
}
body{
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper{
  width: 200px;
  overflow: hidden;
}
.wrapper .item-wrapper{
  display: flex;
}
.wrapper .item-wrapper img{
  width: 200px;
}


js

声明一个名为Slider的类,Slider可以接收一个名为option的对象,此对象的内容包括:

option{
    el,             //这是一个dom 元素,表示轮播所插入的位置
    slides,        //slides也为一个对象,包括属性link(点击图片所跳转的网页),属性image(所显示的图片的地址)
    interval      //图片切换的时间间隔
}

接收到option对象之后,获得属性elslides intervallength(此变量为需要轮播的图片数量)

render()函数,用来将图片渲染到页面上。先设置整个包裹轮播图片的元素宽度,后通过innerHTML将遍历并连接到一起的html放到需要插入的位置。

接着通过start()函数设置定时器,每隔this.$interval/1000s 就调用一次move()函数

class Slider{
  constructor(option={}){
    this.$el = option.el
    this.$slides = option.slides
    this.$interval = option.interval || 3000
    this.$length = this.$slides.length
    this.$index = 0
    this.render()
    this.start()
  }
  render(){
    this.$el.style.width = `${this.$length*200}px`
    this.$el.innerHTML = this.$slides.map(slide=>`
    <div class="item">
      <a href="${slide.link}">
        <img src="${slide.image}">
      </a>
    </div>
  `).join('')
  }
  start(){
    setInterval(()=>{
      this.move()
    },this.$interval)
  }
  move(){
    if(this.$index >= this.$length-1){
      this.$index = 0
    }else{
      this.$index += 1
    }
    this.$el.style.transform = `translateX(${-this.$index*200}px)`
  }
}

实例化Slider类,将所需参数传入。

new Slider({
  el: document.querySelector('.item-wrapper'),
  slides: [
    {link: '#',image: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3524940950,2350169421&fm=26&gp=0.jpg'},
    {link: '#',image: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2250310412,2079390353&fm=26&gp=0.jpg'},
    {link: '#',image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976793582,2211148968&fm=26&gp=0.jpg'},
    {link: '#',image: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=490011464,1072548249&fm=26&gp=0.jpg'}
  ]
})


推荐阅读更多精彩内容

  • 一定的积极想法,如果可以进入脑海,一定是个美好的开始。所以充满梦想,去想那些必成的心,需要强大的信念支撑每一个梦想...
    Emma有话说阅读 25评论 0 0
  • 看完这些照片,你会更热爱你的生活[泪] ​
    水菁阅读 26评论 0 1