VUE手写横向轮播图

前提：自己封装的轮播图，暂时没测出bug，有优化方案欢迎留言~

效果如下图，一行三个，点击上一张/下一张向前或向后移动一格,窗口缩放会适当变形，不影响切换

<template><div class="swiper-template"><div class="my-swiper-page"><div class="page-left"><span>{{ activeIndex + 1 }}</span>/{{ swiperList.length }}</div></div><div class="my-swiper-container" v-show="swiperList.length"><div class="my-swiper-wapper"><div class="arrow imgLeft" @click="clickLeft"><span class="el-icon-arrow-left"></span></div><div class="arrow imgRight" @click="clickRight"><span class="el-icon-arrow-right"></span></div><div ref="swiperDom" class="my-swiper-content"><ul ref="swiperDomUI" :style="ulStyle"><liv-for="(item, index) in swiperList":key="item.id"class="":style="{ width: liWidth + 'px' }"ref="liDom"@click="changeIndex(item, index)"><divclass="introduce-li-box":class="index === activeIndex ? 'active' : ''"><div class="introduce-img"><img :src="item.url" /></div><div class="introduce-name">{{ item.name }}</div></div></li></ul></div></div></div></div>
</template>

<script>
export default {props: {swiperList: {type: Array,default: () => [{name: 'test1',url: 'https://alifei04.cfp.cn/creative/vcg/veer/1600water/veer-130182553.jpg',path: '/detail'},{name: 'test2',url: 'https://alifei04.cfp.cn/creative/vcg/veer/1600water/veer-130182553.jpg',path: '/detail'},{name: 'test3',url: 'https://alifei04.cfp.cn/creative/vcg/veer/1600water/veer-130182553.jpg',path: '/detail'},{name: 'test4',url: 'https://alifei04.cfp.cn/creative/vcg/veer/1600water/veer-130182553.jpg',path: '/detail'}]}},data() {return {activeIndex: 0, // 当前移动图片的索引值boxWidth: 0,liWidth: 0,ulStyle: { left: 0 }}},computed: {},created() {},mounted() {this.getWidth()window.addEventListener('resize', this.getWidth)},methods: {changeIndex(item, index) {this.activeIndex = indexthis.$router.push(item.path)},getWidth() {this.boxWidth = this.$refs.swiperDom.offsetWidththis.liWidth = this.boxWidth / 3if (this.activeIndex * this.liWidth > this.boxWidth) {this.ulStyle = {left: -this.activeIndex * this.liWidth + 'px'}}},clickLeft() {if (this.activeIndex > 0) {this.activeIndex-- // 索引值-1let offsetLeft = this.activeIndex * this.liWidth + this.liWidthlet ulLeft = this.$refs.swiperDomUI.offsetLeftlet distance = 0if (ulLeft < 0) {if (offsetLeft <= this.boxWidth) {if (-ulLeft > this.boxWidth) {distance = Math.abs(ulLeft + this.boxWidth)} else {distance = -ulLeft}} else {distance = offsetLeft - this.boxWidthif (distance >= this.liWidth) {distance = this.liWidth} else {distance = distance}}let index = 0let temp = window.setInterval(() => {if (index < distance && ulLeft < 0) {index += 2 // 每次向右移动的距离this.ulStyle = { left: ulLeft + index + 'px' }} else {window.clearInterval(temp)}}, 10)}}},clickRight() {if (this.activeIndex < this.swiperList.length - 1) {this.activeIndex++let offsetLeft = this.activeIndex * this.liWidth + this.liWidthif (offsetLeft > this.boxWidth) {let ulLeft = Math.abs(this.$refs.swiperDomUI.offsetLeft)let distance = offsetLeft - this.boxWidth - ulLeftlet index = 0let temp = window.setInterval(() => {if (index < distance) {index += 2 // 每次向右移动的距离this.ulStyle = { left: -(ulLeft + index) + 'px' }} else {window.clearInterval(temp)}}, 10)}}}},destroyed() {window.removeEventListener('resize', this.getWidth)}
}
</script>

<style lang="scss" scoped>
.swiper-template {.my-swiper-page {font-size: 16px;color: #bababa;width: 100%;margin: 50px auto;justify-content: space-around;.page-left {text-align: left;width: 50%;padding-left: 30px;box-sizing: border-box;span {font-size: 24px;color: #000000;}}}.my-swiper-container {width: 100%;height: 405px;.my-swiper-wapper {width: 100%;height: 100%;position: relative;padding: 0 30px;font-size: 16px;box-sizing: border-box;.arrow {display: inline-block;cursor: pointer;background: #fff;padding: 7px;&:hover {background: #c09d7b;color: #fff;}}.imgLeft {text-align: left;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}.imgRight {text-align: right;position: absolute;right: 0;top: 50%;transform: translateY(-50%);}.my-swiper-content {width: 100%;height: 100%;position: relative;overflow: hidden;ul {width: auto;white-space: nowrap;position: absolute;left: 0;li {display: inline-block;padding: 0 8px;box-sizing: border-box;.introduce-li-box {width: 100%;height: 405px;box-sizing: border-box;cursor: pointer;text-align: center;.introduce-img {width: 100%;height: 360px;overflow: hidden;img {height: 100%;-webkit-transition: all 0.61s;transition: all 0.6s;&:hover {transform: scale(1.2);-webkit-transform: scale(1.2);}}}.introduce-name {width: 100%;height: 45px;line-height: 45px;font-size: 16px;color: #1f1205;background: #ffffff;}&:hover {.introduce-name {background: #c09d7b;color: #fff;}}&.active {.introduce-name {// background: #c09d7b;// color: #fff;}}}}}}}}
}
</style>

VUE手写横向轮播图相关推荐

简单的手写jquery轮播图（包含切换按钮、小圆点）
简单的手写jquery轮播图(包含切换按钮.小圆点) css代码 * {margin: 0;padding: 0; }.container {width: 800px;height: 400px;ma ...
手写jQuery轮播图（无缝回到第一张）
前言轮播图是学习前端必须会的,面试的时候经常会面试到.轮播图的难点在于最后一张到第一张怎么实现无缝滚动,这是一种思维方式的转变. 原理我们以3张的轮播图为例讲解. 如下图,制作三张轮播图时需要放4 ...
css+js手写卡片轮播图
实现点击的时候切换卡片,自动轮播,鼠标移入暂停,移出继续轮播,有动画事件效果就是这样下面是代码 <html lang="en"><head><me ...
HTML视频能不能做成轮播图,vue.js能做轮播图吗？
vue.js能做轮播图吗?答案是:可以.下面本篇文章给大家通过实例介绍一下使用vue.js做轮播图.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 最近新学习了vuejs,尝试着用v ...
横向自动轮播图html代码,JavaScript实现PC端横向轮播图
JavaScript实现PC端横向轮播图发布时间:2020-09-09 02:10:03 来源:脚本之家阅读:100 作者:菜鸟向往蓝天本文实例为大家分享了JavaScript实现PC端横向轮播 ...
vue带缩略图的轮播图插件_带有缩略图轮播的自适应图像库
vue带缩略图的轮播图插件 View demo 查看演示Download Source 下载源 Today we want to show you how to create a responsive ...
在vue中使用swiper轮播图（亲测有效）
在vue中使用swiper轮播图(亲测有效) 1.新建vue项目 2.装swiper的包 3.使用swiper 网上搜了一大堆在vue中如何使用swiper,结果搜出来一堆垃圾,也不知道从哪里复制的, ...
vue element ui 走马灯轮播图（简单几句话实现自动缩放效果）
实现效果 element ui 简单实现轮播图本文,中间叙述的是过程,完整代码在最后面. 最近在写公司官网,用的是element ui 走马灯组件写的轮播图,ui想要自动缩放的效果,如上视频.在这里 ...
vue 实现无限轮播_用vue写一个轮播图效果
轮播图在网站中几乎无处不在,占用地方少,交互性好.今天就来聊聊如何用vue实现一个轮播效果. 一.原理在轮播图数组dataList中,定义一个变量currentIndex = 0表示第一张图片,默认 ...

VUE手写横向轮播图

VUE手写横向轮播图相关推荐

最新文章

热门文章