<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图无缝切换的实现</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> #app { width: 200px; height: 200px; overflow: hidden; position: relative; } .swiper { width: 400%; position: absolute; } img { width: 200px; height: 200px; border: 0; } </style></head><body> <div id="app"> <div class="swiper" @mouseover="shopTime" @mouseout="againTime"> <img v-for="img in imgArr" :key="img" :src="img" alt=""><img :src="imgArr[0]"> </div> </div> <div> <strong>轮播图无缝切换的实现</strong> <p>1. 外层div须要能残缺展示图片的长宽, 外层用来显示</p> <p>2. 内层div须要包容轮播的图片数量+1(首图片), 内层用来轮播图片</p> <p>3. mounted时给timer赋值一个定时器, 内容设置每隔50ms让图片间隔挪动4px</p> <p>4. 当再一次轮播到首图片后,跳回一开始,从新开始新的一轮</p> <p>5. 实质就是一次轮播完跳回结尾,只不过个别从头开始就是从第一张平移到第二张,而短少最初一张到第一张的平移</p> <p>6. 所以内层div数量+1, 单轮平移最大值也要(单轮图片数量-1)*图片宽度, 通过单轮最初一张平移到第一张后, 跳转下一轮来实现视觉的轮播成果</p> </div> <script> var vm = new Vue({ el: '#app', data: { distance: 0, timer: null, imgArr: [ "image/01.jpg", "image/02.jpg", "image/03.jpg"] }, mounted() { this.timer = setInterval(() => { let swiper = document.getElementsByClassName('swiper')[0] this.distance += 4 if(this.distance == 600) {this.distance = 0} swiper.style.left = `-${this.distance}px` }, 50) }, methods: { shopTime() { clearTimeout(this.timer) }, againTime() { setTimeout(() => { this.timer = setInterval(() => { let swiper = document.getElementsByClassName('swiper')[0] this.distance += 4 if(this.distance == 600) {this.distance = 0} swiper.style.left = `-${this.distance}px` }, 50) }, 1000) } } }) </script></body></html>