直接上源码

(1)组件文件 Carousel.vue

<template>
<div class="carousel-component">
<div ref="carouselItems" class="carousel-items" :style="carouselStyle" @mouseenter="handleStop" @mouseleave="handlePlay">
<div class="carousel-items-images">
<img :src="dataImage[dataImage.length-1].src" alt="" srcset="">
</div>
<div class="carousel-items-images" v-for="(item, index) in dataImage" :key="index">
<img :src="item.src" alt="" srcset="">
</div>
<div class="carousel-items-images">
<img :src="dataImage[0].src" alt="" srcset="">
</div>
</div>
<div class="carousel-btn">
<div @click="handleJump(index+1)" v-for="(item, index) in dataImage" :key="index" :class="currentIndex == index+1?'carousel-btn-items active':'carousel-btn-items'"></div>
</div>
</div>
</template> <script>
export default {
name: 'my-carousel',
props: {
dataImage: {
type: Array,
default: function () {
return []
}
},
initialImgWidth: {
type: Number,
default: 990
},
initialDistance: {
type: Number,
default: -990
},
initialSpeed: {
type: Number,
default: 40
},
initialInterval: {
type: Number,
default: 3
}
},
data () {
return {
imgWidth: this.initialImgWidth,
distance: this.initialDistance,
currentIndex: 1,
transitionEnd: true,
speed: this.initialSpeed
}
},
computed: {
carouselStyle () {
return {
transform: `translate3d(${this.distance}px, 0, 0)`
}
},
interval () {
return this.initialInterval * 1000
}
},
methods: {
init () {
this.handlePlay()
window.onblur = function () { this.handleStop() }.bind(this)
window.onfocus = function () { this.handlePlay() }.bind(this)
},
move (offset, direction, speed) { // 移动方法
if (!this.transitionEnd) return
this.transitionEnd = false
direction === -1 ? this.currentIndex += offset / this.imgWidth : this.currentIndex -= offset / this.imgWidth
if (this.currentIndex > this.dataImage.length) this.currentIndex = 1
if (this.currentIndex < 1) this.currentIndex = this.dataImage.length
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 < -this.imgWidth*this.currentIndex) this.distance = -this.imgWidth
if (des > -this.imgWidth) this.distance = -this.imgWidth*this.currentIndex
}
}, 20)
},
handleJump (index) { // 小圆点点击跳转
const direction = index - this.currentIndex >= 0 ? -1 : 1
const offset = Math.abs(index - this.currentIndex) * this.imgWidth
const jumpSpeed = Math.abs(index - this.currentIndex) === 0 ? this.speed : Math.abs(index - this.currentIndex) * this.speed
this.move(offset, direction, jumpSpeed)
},
handlePlay () { // 启动自动轮播定时器
if (this.timer) {
window.clearInterval(this.timer)
this.timer = null
}
this.timer = window.setInterval(() => {
this.move(this.imgWidth, -1, this.speed)
}, this.interval)
},
handleStop () { // 关闭定时器
window.clearInterval(this.timer)
this.timer = null
}
},
mounted () {
this.init()
}
}
</script> <style lang="scss" scoped>
.carousel-component{
height: 500px;
position: relative;
overflow: hidden;
.carousel-items{
display: flex;
position: absolute;
width: 100%;
height: 100%;
.carousel-items-images{
width: 100%;
height: 100%;
img{
height: 100%;
user-select: none;
}
}
}
.carousel-btn{
height: 30px;
position: absolute;
bottom: 20px;
left: 0;
right: 0;
margin: auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
.carousel-btn-items{
width: 8px;
height: 8px;
border-radius: 8px;
background-color: #fff;
border:1px solid #fd3555;
margin:0 3px;
cursor: pointer;
&.active{
width: 16px;
background-color: #fd3555;
}
}
}
}
</style>

2.父组件中引入

<template>
<div class="home-page">
<div class="home-nav">
<div class="container">
<div class="left-nav"></div>
<div class="banner" ref="banner">
<my-carousel :dataImage="dataImage"></my-carousel>
</div>
</div>
</div>
</template> <script>
import Carousel from '../components/carousel/Carousel'
export default {
name: 'my-home',
data () {
return {
dataImage: [{
src: 'xxxxxx/banner1.jpg'
}, {
src: 'xxxxxx/banner2.jpg'
}, {
src: 'xxxxxx/banner3.jpg'
}]
}
},
components: {
'my-carousel': Carousel
}
}
</script>

3.效果

Vue(三十一)轮播组件的更多相关文章

  1. vue-awesome-swipe 基于vue使用的轮播组件 使用(改)

    npm install vue-awesome-swiper --save  //基于vue使用的轮播组件 <template> <swiper :options="swi ...

  2. vue中引入awesomeswiper的方法以及编写轮播组件

    1.先安装less-loader npm install less less-loader --save 2.再安装css-loader npm install css-loader --save 3 ...

  3. vue 3d轮播组件 vue-carousel-3d

    开发可视化项目时,需要3d轮播图,找来找去发现这个组件,引用简单,最后实现效果还不错.发现关于这个组件,能搜到的教程不多,就分享一下我的经验. 插件github地址:https://wlada.git ...

  4. 基于移动端Reactive Native轮播组件的应用与开发详解

    总结下这段时间学习reactive native的一些东西,我们来认识一下,被炒得这么火的rn,究竟是个什么东西,以及如何去搭建自己的demo. reactive  native是什么 由facebo ...

  5. 移动端Reactive Native轮播组件

    移动端Reactive Native轮播组件 总结下这段时间学习reactive native的一些东西,我们来认识一下,被炒得这么火的rn,究竟是个什么东西,以及如何去搭建自己的demo. reac ...

  6. C-Swipe Mobile 一个适用于Vue2.x的移动端轮播组件

    近期在做的一个Vue2项目里需要一个可以滑动的轮播组件,但是又因为现有的传统轮播库功能过于繁琐和笨重.因此自己写了一个针对于Vue2.x的轻型轮播组件. 项目GitHub链接:C-Swipe Mobi ...

  7. Angular2组件与指令的小实践——实现一个图片轮播组件

    如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...

  8. React-Native之轮播组件looped-carousel的介绍与使用

    React-Native之轮播组件looped-carousel的介绍与使用 一,关于react-native轮播组件的介绍与对比 1,react-native-swiper在动态使用网页图片,多张图 ...

  9. MUI组件四:选择器、滚动条、单选框、区域滚动和轮播组件

    目录(?)[+]   1.picker(选择器) mui框架扩展了pipcker组件,可用于弹出选择器,在各平台上都有统一表现.poppicker和dtpicker是对picker的具体实现.*pop ...

  10. vue.js层叠轮播

    最近写公司项目有涉及到轮播banner,一般的ui框架无法满足产品需求:所以自己写了一个层叠式轮播组件:现在分享给大家: 主要技术栈是vue.js ;javascript;jquery:确定实现思路因 ...

随机推荐

  1. 学习itop4412开发板有哪些资料可学习?能否学会

    1.光盘资料 下面简单的做一下了解,在需要使用这些资料的时候,会针对性的做详细介绍. 将文件以及文件夹按照“名称+递增”的方式排列,如下: 01_PCB_SCH_DATASHEET-- -----开发 ...

  2. YOLO v3

    yolo为you only look once. 是一个全卷积神经网络(FCN),它有75层卷积层,包含跳跃式传递和降采样,没有池化层,当stide=2时用做降采样. yolo的输出是一个特征映射(f ...

  3. 网站robots.txt & sitemap.xml

    1. 如何查看网站的robots.txt 网址/robots.txt, 比如小米  https://www.mi.com/robots.txt sitemap.xml

  4. Win10如何彻底禁用小娜?彻底禁用小娜的方法

    原文地址:https://www.cnblogs.com/zhuimengle/p/5949152.html 小娜是Win10系统中的一款强大功能,有了它,我们对电脑的操作将更加方便.Win10系统有 ...

  5. Win 10中使用图片查看器

    在Win10中,照片应用提供了时间线.专辑等更丰富的图片管理功能,但是对于基于文件夹打开浏览图片的方式显得笨拙, 放大缩小操作略繁琐,有时还会出现当前文件夹图片加载迟缓导致无法快速浏览的问题. 此时你 ...

  6. LeetCode.数字转罗马数字

    罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 II ,即为两个并 ...

  7. Java小程序练习

    1.选择排序法所谓的选择排序,就是把当前数据与它后面所有的数据做个比较,假如满足比较条件,则进行交换操作,直到最后二个数比较完毕,这样重新输出的数据就已经由大到小或者由小到大排好序了.for(int ...

  8. Android 8.0 无法收到broadcast

    参见此页 https://commonsware.com/blog/2017/04/11/android-o-implicit-broadcast-ban.html 目前最简单的方法就是:把targe ...

  9. 详解PROTOCOL BUFFERS

    1. 前言 Protocal Buffers是google推出的一种序列化协议.由于它的编码和解码的速度,已经编码后的大小控制的较好,因此它常常被用在RPC调用中,传递参数和结果.比如gRPC. Pr ...

  10. Django组件-Forms组件

    Django的Forms组件主要有以下几大功能: 页面初始化,生成HTML标签 校验用户数据(显示错误信息) HTML Form提交保留上次提交数据 一.小试牛刀 1.定义Form类 from dja ...