直接上源码

(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. day 19 - 1 模块

    collections 模块 在内置数据类型(dict.list.set.tuple)的基础上,collections 模块还提供了几个额外的数据类型:Counter.deque.defaultdic ...

  2. 2018-2019-2 20165325 《网络对抗技术》 Exp5:MSF基础应用

    2018-2019-2 20165325 <网络对抗技术> Exp5:MSF基础应用 实验内容(概要) 1.1 一个主动攻击实践,本实验选择 ms17_010_eternalblue(成功 ...

  3. 题解 P3246 【[HNOI2016]序列】

    很久之前做过这道题,但是跑得贼慢,现在用了可以被卡成 n m 的笛卡尔树做法,发现跑得贼快[雾 noteskey 介绍一种复杂度错误然鹅在随机数据下跑得贼快的算法: 笛卡尔树 方法就是 \(O~ n\ ...

  4. 前端笔记之JavaScript(五)关于数组和字符串那点事

    一.数组 1.1数组概念 数组(array)是一个有序的数据集合.说白了,数组就是一组数.数组内部可以存放一个或多个单独的数据,整体组成数组. 定义数组最简单的方式:数组字面量. 数组的字面量“[]” ...

  5. 【转载的】这张图能容易理解sql joins,收藏下!

  6. c++入门篇五

    默认参数: //默认参数//函数的默认参数,参数后面有'='//函数参数注意事项,如有一个位置有了默认参数//那么从该位置的后面就必须要有参数 , ) { //b有默认参数,b的后面也应该要有默认参数 ...

  7. 清晰讲解SQL语句中的外连接,通用于Mysql和Oracle,全是干货哦

    直入主题: 我们做一个操作,将员工SCOTT的部门去掉,再次通过内连接查看数据,看看会产生什么现象? 使用内连接,查询数据 问题:找不到SCOTT员工了,只有13条数据,这显然不合理:这就是内连接的缺 ...

  8. 逆向 make 打包错误解决方案 make: *** [internal-package] Error 2

    修改deb.mk文件第6行的压缩方式为gzip vim $THEOS/makefiles/package/deb.mk _THEOS_PLATFORM_DPKG_DEB_COMPRESSION ?= ...

  9. bzoj 2599

    还是点对之间的问题,果断上点分治 同样,把一条路径拆分成经过根节点的两条路径,对不经过根节点的路径递归处理 然后,我们逐个枚举根节点的子树,计算出子树中某一点到根节点的距离,然后在之前已经处理过的点中 ...

  10. Python利用os模块批量修改文件名

    初学Python.随笔记录自己的小练习. 通过查阅资料os模块中rename和renames都可以做到 他们的区别为.rename:只能修改文件名   renames:可以修改文件名,还可以修改文件上 ...