1、先看效果：

熟悉的图片轮播，只要是个网站，百分之90以上会有个图片轮播。我认为使用图片轮播。

第一可以给人以一种美观的感受，而不会显得网站那么呆板，

第二可以增加显示内容，同样的区域可以显示更多内容。

　2、每学一个新东西 ，图片轮播都是很好的练手案例，而且，也很实用。

3、基本要求：页面加载，自动播放。鼠标悬停，停止播放。鼠标离开，继续播放

　　　　　　　　点击左右箭头切换上一张，下一张图片。

　　　　　　　　下方小圆点显示当前位第几张图片。

　4、使用Vue实现　　　　　　

　5、示例代码

　　结构html：

<template> <div id="slider"> <div class="window" @mouseover="stop" @mouseleave="play"> <ul class="container" :style="containerStyle"> <li> <img :style="{width:imgWidth+'px'}" :src="sliders[sliders.length - 1].img" alt=""> </li> <li v-for="(item, index) in sliders" :key="index"> <img :style="{width:imgWidth+'px'}" :src="item.img" alt=""> </li> <li> <img :style="{width:imgWidth+'px'}" :src="sliders[0].img" alt=""> </li> </ul> <ul class="direction"> <li class="left" @click="move(600, 1, speed)"> <svg class="icon" width="30px" height="30.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://puted:{ containerStyle() { return { transform:`translate3d(${this.distance}px, 0, 0)` } }, interval() { return this.initialInterval * 1000 } }, mounted() { this.init() }, methods:{ init() { this.play() window.onblur = function() { this.stop() }.bind(this) window.onfocus = function() { this.play() }.bind(this) }, move(offset, direction, speed) { console.log(speed) if (!this.transitionEnd) return this.transitionEnd = false direction === -1 ? this.currentIndex += offset/600 : this.currentIndex -= offset/600 if (this.currentIndex > 5) this.currentIndex = 1 if (this.currentIndex < 1) this.currentIndex = 5 const destination = this.distance + offset * direction this.animate(destination, direction, speed) }, animate(des, direc, speed) { if (this.temp) { window.clearInterval(this.temp); this.temp = null ; } this.temp = window.setInterval(() => { if ((direc === -1 && des < this.distance) || (direc === 1 && des > this.distance)) { this.distance += speed * direc } else { this.transitionEnd = true window.clearInterval(this.temp) this.distance = des if (des < -3000) this.distance = -600 if (des > -600) this.distance = -3000 } }, 20) }, jump(index) { const direction = index - this.currentIndex >= 0 ? -1 : 1; const offset = Math.abs(index - this.currentIndex) * 600; const jumpSpeed = Math.abs(index - this.currentIndex) === 0 ? this.speed : Math.abs(index - this.currentIndex) * this.speed ; this.move(offset, direction, jumpSpeed) }, play() { if (this.timer) { window.clearInterval(this.timer) this.timer = null } this.timer = window.setInterval(() => { this.move(600, -1, this.speed) }, this.interval) }, stop() { window.clearInterval(this.timer) this.timer = null } }}</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。