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

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

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

slider - 锐客网

【如何使用JS实现一个轮播组件】
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对象之后，获得属性slides length（此变量为需要轮播的图片数量）
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=>` 文章图片 `).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'} ] })