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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇Vuejs+vue-router打包+Nginx配置的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
大家在vue中，經(jīng)常會用到數(shù)據(jù)請求問題，常用的有vue-resourse、axios ，今天小編給大家介紹下axios的post請求 ，感興趣的朋友跟隨腳本之家小編一起看看吧2018-04-04
vue+element-ui實現(xiàn)表格編輯的三種實現(xiàn)方式
這篇文章主要介紹了vue+element-ui實現(xiàn)表格編輯的三種實現(xiàn)方式，主要有表格內(nèi)部顯示和編輯切換，通過彈出另外一個表格編輯和直接通過樣式控制三種方式，感興趣的小伙伴們可以參考一下2018-10-10
本文主要介紹了element Dropdown組件意想不到的坑，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
element-ui?form表單的動態(tài)rules校驗功能實現(xiàn)
在vue項目中，有時候可能會用到element-ui?form表單的動態(tài)rules校驗，這篇文章主要介紹了element-ui form表單的動態(tài)rules校驗,我們可以巧妙的運用element-ui form表單里面form-item的校驗規(guī)則來處理，本文結(jié)合實例代碼介紹的非常詳細，需要的朋友可以參考下2023-07-07
使用vue-cli+webpack搭建vue開發(fā)環(huán)境的方法
這篇文章主要介紹了使用vue-cli+webpack搭建vue開發(fā)環(huán)境的方法,需要的朋友可以參考下2017-12-12
這篇文章主要為大家詳細介紹了Vue非父子組件通信的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了Vue3在jsx下父子組件實現(xiàn)使用插槽方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
詳解使用vue-router進行頁面切換時滾動條位置與滾動監(jiān)聽事件
本篇文章主要介紹了詳解使用vue-router進行頁面切換時滾動條位置與滾動監(jiān)聽事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要介紹了vuex中使用modules時遇到的坑及問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08