要求：使用原生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对象之后，获得属性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=>`
<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'}
]
})
网友评论