Vue实现图片轮播组件思路及实例解析
这篇文章主要介绍了Vue实现图片轮播组件思路及实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
1、先看效果：
熟悉的图片轮播，只要是个网站，百分之90以上会有个图片轮播。我认为使用图片轮播。
第一可以给人以一种美观的感受，而不会显得网站那么呆板，
第二可以增加显示内容，同样的区域可以显示更多内容。
2、每学一个新东西 ，图片轮播都是很好的练手案例，而且，也很实用。
3、基本要求：页面加载，自动播放。鼠标悬停，停止播放。鼠标离开，继续播放
点击左右箭头切换上一张，下一张图片。
下方小圆点显示当前位第几张图片。
4、使用Vue实现
5、示例代码
结构html：
template
div id="slider"
div @mouseover="stop" @mouseleave="play"
ul :
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
img :style="{width:imgWidth+'px'}" :src="sliders[0].img" alt=""
/li
/ul
li @click="move(600, 1, speed)"
svg width="30px" height="30.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="2000/svg" path fill="#ffffff" d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z" / /svg
/li
li @click="move(600, -1, speed)"
svg width="30px" height="30.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="2000/svg" path fill="#ffffff" d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z" / /svg
/li
/ul
li v-for="(dot, i) in sliders" :key="i"
: @click = jump(i+1)
/li
/ul
/div
/div
/template
CSS部分：
box-sizing: border-box;
margin:0;
padding:0;
ol,ul{
list-style: none;
#slider{
text-align: center;
.window{
position:relative;
width:600px;
height:400px;
margin:0 auto;
overflow:hidden;
.container{
display:flex;
position:absolute;
.left, .right{
position:absolute;
top:50%;
transform:translateY(-50%);
width:50px;
height:50px;
background-color:rgba(0,0,0,.3);
border-radius:50%;
cursor:pointer;
.left{
left:3%;
padding-left:12px;
padding-top:10px;
.right{
right:3%;
padding-right:12px;
padding-top:10px;
img{
user-select: none;
.dots{
position:absolute;
bottom:10px;
left:50%;
transform:translateX(-50%);
.dots li{
display:inline-block;
width:15px;
height:15px;
margin:0 3px;
border:1px solid white;
border-radius:50%;
background-color:#333;
cursor:pointer;
.dots .dotted{
background-color:orange;
}
JavaScript部分：
script
export default {
name: 'slider',
pro凡科抠图: {
initialSpeed: {
type: Number,
default: 30
initialInterval: {
type: Number,
default: 3
data () {
return {
sliders:[
img:'adbde61e4343dedd21e97ea7fa8db7d077ffe-qn8Pjn_fw658'
img:'adeed7d28df6e776c2fa6032579c697381d1a82b7fe00-fwRqgn_fw658'
img:'ab7f48509b3c0353017d9a85ef1d12400c9b2724540d4-p3zouo_fw658'
img:'60f788fc2a846192f224b9e6d4904b30ed3d67-ACFJ9G_fw658'
img:'22ded455284aab361b8d2056e82f74a891aa-凡科抠图raEB_fw658'
imgWidth:600,
currentIndex:1,
distance:-600,
transitionEnd: true,
speed: this.initialSpeed
computed:{
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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。