Vue实现上下层叠轮播图

 更新时间:2022年04月29日 09:21:18   作者:cmmboy1990  
这篇文章主要介绍了Vue实现上下层叠轮播图,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

上下层叠轮播图

1.效果

2.代码

<template>
	<div class="article-main" @mouseover='mouseOver()' @mouseleave="mouseLeave()">
		<img src="../../assets/a3.jpeg" :class="v1" />
		<img src="../../assets/a2.jpeg" :class="v2" />
		<img src="../../assets/a1.jpeg" :class="v3" />
		<div class="dot-view">
			<div :class="dot1">
			</div>
			<div :class="dot2">
			</div>
			<div :class="dot3">
			</div>
		</div>
		<div class="arrow-view" v-show="isActive">
			<img src="../../assets/btn-l-d.png" class="arrow-left" @click="toLeft()" />
			<img src="../../assets/btn-r-d.png" class="arrow-right" @click="toRight()" />
		</div>
	</div>
</template>
<script>
	export default {
		name: 'home',
		data() {
			return {
				timer: '',
				isActive: false,
				value: 1,
				v1: 'banner wz1',
				v2: 'banner wz2',
				v3: 'banner wz3',
				dot1: 'dot-1 dot-color-actived',
				dot2: 'dot-2 dot-color-normal',
				dot3: 'dot-3 dot-color-normal'
			}
		},
		methods: {
			toLeft() {
				this.value--
				if (this.value == 0) {
					this.value = 3
				}
				this.changeClasss()
			},
			toRight() {
				this.value++
				if (this.value > 3) {
					this.value = 1
				}
				this.changeClasss()
			},
			mouseOver() {
				this.isActive = true
				clearInterval(this.timer);
			},
			// 移出
			mouseLeave() {
				this.isActive = false
				this.timer = setInterval(this.get, 3000);
			},
			changeClasss() {
				if (this.value == 1) {
					this.v1 = 'banner wz1'
					this.v2 = 'banner wz2'
					this.v3 = 'banner wz3'
					this.dot1 = 'dot-1 dot-color-actived'
					this.dot2 = 'dot-2 dot-color-normal'
					this.dot3 = 'dot-3 dot-color-normal'
				}
				if (this.value == 2) {
					this.v1 = 'banner wz2'
					this.v2 = 'banner wz3'
					this.v3 = 'banner wz1'
					this.dot1 = 'dot-1 dot-color-normal'
					this.dot2 = 'dot-2 dot-color-actived'
					this.dot3 = 'dot-3 dot-color-normal'
				}
				if (this.value == 3) {
					this.v1 = 'banner wz3'
					this.v2 = 'banner wz2'
					this.v3 = 'banner wz1'
					this.dot1 = 'dot-1 dot-color-normal'
					this.dot2 = 'dot-2 dot-color-normal'
					this.dot3 = 'dot-3 dot-color-actived'
				}
			},
			get() {
				this.value++;
				if (this.value > 3) {
					this.value = 1
				}
				this.changeClasss()
			}
		},
		mounted() {
			this.timer = setInterval(this.get, 3000);
		},
		beforeDestroy() {
			clearInterval(this.timer);
		},
	}
</script>
<style scoped>
	.arrow-left {
		position: absolute;
		left: 20px;
		top: 250px;
		cursor: pointer;
	}
	.arrow-right {
		position: absolute;
		left: 280px;
		top: 250px;
		cursor: pointer;
	}
	.article-main {
		width: 320px;
		height: 300px;
		background-color: #aaffff;
		position: relative;
	}
	.banner {
		border-radius: 4px;
		position: absolute;
		transition: all 1s;
	}
	.wz1 {
		width: 280px;
		height: 200px;
		left: 20px;
		z-index: 777;
		top: 20px;
	}
	.wz2 {
		width: 290px;
		height: 200px;
		left: 15px;
		top: 30px;
		z-index: 888;
	}
	.wz3 {
		width: 300px;
		height: 200px;
		left: 10px;
		top: 40px;
		z-index: 999;
	}
	.dot-view {
		position: absolute;
		left: 120px;
		top: 255px;
		display: flex;
		flex-direction: row;
	}
	.dot-color-actived {
		background-color: #ff0000;
	}
	.dot-color-normal {
		background-color: #333;
	}
	.dot-1 {
		width: 10px;
		height: 10px;
		border-radius: 50%;
	}
	.dot-2 {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		margin-left: 20px;
	}
	.dot-3 {
		margin-left: 20px;
		width: 10px;
		height: 10px;
		border-radius: 50%;
	}
</style>

原生轮播图(无缝轮播图)

效果图

<template>
  <div>
    <div class="swiper">
      <ul ref="swiper" class="swipero">
        <li v-for="(item, index) in items" :key="index">
          <div v-text="item.name"></div>
        </li>
      </ul>
    </div>
    <div @click="preNext()">下一页</div>
    <div @click="preLast()">上一页</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: "1" },
        { id: 1, name: "2" },
        { id: 1, name: "3" },
      ],
      timer: null,
      active: 0,
      flag: true,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化克隆一个元素,用来解决视觉差的效果(瞬移)
    init() {
      let swiper = this.$refs.swiper;
      let first = swiper.firstElementChild.cloneNode(true);
      swiper.appendChild(first);
    },
    //下一页
    next() {
      let swiper = this.$refs.swiper;
      // 判断是否是最后一个
      // debugger;
      if (this.$refs.swiper.children.length - 2 <= this.active) {
        // debugger
        setTimeout(() => {
          let swiper = this.$refs.swiper;
          this.active = 0;
          swiper.style.transition = "none";
          swiper.style.left = -200 * this.active + "px";
        }, 500);
      }
      this.active++;
      swiper.style.transition = "all .5s";
      swiper.style.left = -200 * this.active + "px";
    },
    // 上一页
    pre() {
      let swiper = this.$refs.swiper;
      // 判断是否是第一个,线瞬间移动到最后,然后再实现动画效果
      if (this.active == 0) {
        let len = this.$refs.swiper.children.length;
        this.active = len - 1;
        // debugger
        swiper.style.transition = "none";
        swiper.style.left = -200 * this.active + "px";
        setTimeout(() => {
          this.active = len - 2;
          swiper.style.transition = "all .5s";
          swiper.style.left = -200 * this.active + "px";
        }, 300);
      } else {
        this.active--;
        swiper.style.transition = "all .5s";
        swiper.style.left = -200 * this.active + "px";
        // this.swiper();
      }
    },
    // 节流
    throttle(callback,speed=3000) {
      let self = this;
      if (self.flag) {
        clearTimeout(this.timer);
        self.timer = setTimeout(() => {
          callback();
          self.flag = true;
        }, speed);
      }
      this.flag = false;
    },
    // 下一页(节流)
    preNext() {
      this.throttle(this.next,1000);
    },
    // 上一页(节流)
    preLast() {
      this.throttle(this.pre,1000);
    },
    // 自动轮播
    swiper() {
      let self = this;
      setInterval(() => {
        self.pre();
      }, 3000);
    },
  },
};
</script>
<style lang="less" scoped>
.swiper {
  width: 200px;
  height: 200px;
  overflow: hidden;
  position: relative;
  ul {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    white-space: nowrap;
    li {
      width: 200px;
      height: 200px;
      display: inline-block;
      vertical-align: bottom;
      position: relative;
      // margin-right: 20px;
      transition: all 0.5s;
      > div {
        width: 100%;
        height: 100%;
      }
      &:nth-child(1) {
        background-color: aquamarine;
      }
      &:nth-child(2) {
        background-color: rgb(255, 204, 127);
      }
      &:nth-child(3) {
        background-color: rgb(255, 127, 144);
      }
      &:nth-child(4) {
        background-color: rgb(127, 255, 223);
      }
    }
    .active {
      width: 400px;
      height: 400px;
    }
  }
}
</style>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue+axios实现图片上传识别人脸的示例代码

    vue+axios实现图片上传识别人脸的示例代码

    本文主要介绍了vue+axios实现图片上传识别人脸,这里采用的是vant的文件上传组件,通过上传图片后端识别图片里的人脸,感兴趣的可以了解一下
    2021-11-11
  • vue实现登录页面的验证码以及验证过程解析(面向新手)

    vue实现登录页面的验证码以及验证过程解析(面向新手)

    这篇文章主要介绍了vue实现登录页面的验证码以及验证过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • Vue.js性能优化N个技巧(值得收藏)

    Vue.js性能优化N个技巧(值得收藏)

    本文主要还是针对 Vue.js 2.x 版本,毕竟接下来一段时间,Vue.js 2.x 还是我们工作中的主流版本,对vue.js性能优化技巧相关知识感兴趣的朋友一起看看吧
    2021-09-09
  • vue组件传值的11种方式总结

    vue组件传值的11种方式总结

    这篇文章主要介绍了vue组件传值的11种方式总结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue 项目常用加载器及配置详解

    vue 项目常用加载器及配置详解

    本文介绍了vue 项目常用加载器及配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 详解.vue文件中style标签的几个标识符

    详解.vue文件中style标签的几个标识符

    这篇文章主要介绍了详解.vue文件中style标签的几个标识符,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue中遇到scrollIntoView无效问题及解决

    vue中遇到scrollIntoView无效问题及解决

    这篇文章主要介绍了vue中遇到scrollIntoView无效问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 使用Vue实现带拖动和播放功能的时间轴

    使用Vue实现带拖动和播放功能的时间轴

    这篇文章主要为大家详细介绍了如何使用Vue实现带拖动和播放功能的时间轴,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • Vue使用百度地图实现城市定位

    Vue使用百度地图实现城市定位

    这篇文章主要为大家详细介绍了Vue使用百度地图实现城市定位,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • Vue函数式组件-你值得拥有

    Vue函数式组件-你值得拥有

    这篇文章主要介绍了Vue函数式组件及vue函数式组件的优缺点,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05

最新评论