手写轮播图

工作时经常使用插件实现轮播图，然而有些轮播图的样式需要自己调整，实现起来也不难就是要注意细节，如图是一个点击下面的两个按钮可以切换图片，实现的思路大同小异。想要自动播放的话就加一个定时器，然后想要无缝切换就需要在第一张和最后一张将其复制一张分别放在头尾，点击到最后一张就将其自动跳到第二张，实现无缝切换。

首先要将图片布局成一列，然后带边框的这个容器overflow：hidden；

具体的代码

< div class = "btn" > 
    <button type = "button"id = "preBtn"@click = 'pre'disabled > pre < /button>
    <div class="imgBox-ss">
        <div class="imgBox-s">//必须这种布局才可以实现
            <div class="itemBox" v-for="(item,index) in imgList">
		<a href="">
                    <img :src="item" / > 
                </a>
            </div > 
         </div>
    </div > 
    <button type = "button"id = "nextBtn"@click = 'next' > next < /button>
</div > 

点击事件

moveTo(index) {
    let dom = document.querySelector('.imgBox-s')
    let i = index * 155 //图片的宽度以及间距，记得box-sizing:border-box;
    dom.style.transform = `translateX(-${i}px)` //偏移一张图片的距离
    this.curIndex = index //this.curIndex默认为0
},

next() {
    let i = this.curIndex + 1
    if (i == this.length) {
	document.getElementById("nextBtn").disabled = true;
    } else {
	document.getElementById("preBtn").disabled = false;
    }
    this.moveTo(i)
},
pre() {
    let i = this.curIndex - 1
    if (i == 0) {//判断是否还有图片，没有就禁用按钮
	document.getElementById("preBtn").disabled = true;
    } else {
        document.getElementById("nextBtn").disabled = false;
    }
    this.moveTo(i)
},

再给小图片添加点击事件，将其图片的url赋值给大图片，或者是将其索引，让大图片去找到相对应的大图片的索引即可，右边还有颜色色块，点击将其数组赋值给imgList即可