Vue實現(xiàn)上下層疊輪播圖
更新時間：2022年04月29日 09:21:18 作者：cmmboy1990
這篇文章主要介紹了Vue實現(xiàn)上下層疊輪播圖，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
上下層疊輪播圖
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;
? ? ? // 判斷是否是第一個,線瞬間移動到最后，然后再實現(xiàn)動畫效果
? ? ? 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();
? ? ? }
? ? },
? ? // 節(jié)流
? ? throttle(callback,speed=3000) {
? ? ? let self = this;
? ? ? if (self.flag) {
? ? ? ? clearTimeout(this.timer);
? ? ? ? self.timer = setTimeout(() => {
? ? ? ? ? callback();
? ? ? ? ? self.flag = true;
? ? ? ? }, speed);
? ? ? }
? ? ? this.flag = false;
? ? },
? ? // 下一頁(節(jié)流)
? ? preNext() {
? ? ? this.throttle(this.next,1000);
? ? },
? ? // 上一頁(節(jié)流)
? ? 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>以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了VUE對Storage的過期時間設置,及增刪改查方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
本文介紹了如何刪除全局和本地的webpack及其CLI,并提供了檢查webpack殘余文件的方法,總結了個人的操作經(jīng)驗,旨在為讀者提供參考,并期待獲得更多支持2024-09-09
element-ui?tree?手動展開功能實現(xiàn)(異步樹也可以)
這篇文章主要介紹了element-ui?tree?手動進行展開（異步樹也可以）,項目中用到了vue的element-ui框架，用到了el-tree組件，需要的朋友可以參考下2022-08-08
本篇文章主要介紹了解決vue里碰到 $refs 的問題的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
在做數(shù)據(jù)大屏開發(fā)的過程中,經(jīng)常出現(xiàn)需要對列表進行自動滾動的需求,所以本文就來為大家介紹一下如何利用vue封裝一個自動循環(huán)滾動的列表吧2023-09-09
這篇文章主要介紹了詳解Vue.js入門環(huán)境搭建，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要介紹了深入理解vue中的$set,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
深入探討Vue計算屬性與監(jiān)聽器的區(qū)別和用途
在Vue的開發(fā)中,計算屬性（Computed Properties）和監(jiān)聽器（Watchers）是兩種非常重要的概念,它們都用于響應式地處理數(shù)據(jù)變化,本文將帶你深入了解計算屬性和監(jiān)聽器的區(qū)別,以及在何時使用它們,感興趣的朋友可以參考下2023-09-09
遞歸組件是Vue中用于渲染復雜嵌套結構的強大工具,通過組件引用自身來簡化代碼,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧2024-12-12
這篇文章主要介紹了Vue.js 時間轉換代碼及時間戳轉時間字符串,需要的朋友可以參考下2018-10-10