Vue手寫橫向輪播圖的實例
更新時間：2022年09月20日 11:02:29 作者：new_liu
這篇文章主要介紹了Vue手寫橫向輪播圖的實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue手寫橫向輪播圖
前提：自己封裝的輪播圖，暫時沒測出bug~
效果如下圖，一行三個，點擊上一張/下一張 向前或向后移動一格,窗口縮放會適當(dāng)變形，不影響切換
<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">
<li
v-for="(item, index) in swiperList"
:key="item.id"
class=""
:style="{ width: liWidth + 'px' }"
ref="liDom"
@click="changeIndex(item, index)"
>
<div
class="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, // 當(dāng)前移動圖片的索引值
boxWidth: 0,
liWidth: 0,
ulStyle: { left: 0 }
}
},
computed: {},
created() {},
mounted() {
this.getWidth()
window.addEventListener('resize', this.getWidth)
},
methods: {
changeIndex(item, index) {
this.activeIndex = index
this.$router.push(item.path)
},
getWidth() {
this.boxWidth = this.$refs.swiperDom.offsetWidth
this.liWidth = this.boxWidth / 3
if (this.activeIndex * this.liWidth > this.boxWidth) {
this.ulStyle = {
left: -this.activeIndex * this.liWidth + 'px'
}
}
},
clickLeft() {
if (this.activeIndex > 0) {
this.activeIndex-- // 索引值-1
let offsetLeft = this.activeIndex * this.liWidth + this.liWidth
let ulLeft = this.$refs.swiperDomUI.offsetLeft
let distance = 0
if (ulLeft < 0) {
if (offsetLeft <= this.boxWidth) {
if (-ulLeft > this.boxWidth) {
distance = Math.abs(ulLeft + this.boxWidth)
} else {
distance = -ulLeft
}
} else {
distance = offsetLeft - this.boxWidth
if (distance >= this.liWidth) {
distance = this.liWidth
} else {
distance = distance
}
}
let index = 0
let 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.liWidth
if (offsetLeft > this.boxWidth) {
let ulLeft = Math.abs(this.$refs.swiperDomUI.offsetLeft)
let distance = offsetLeft - this.boxWidth - ulLeft
let index = 0
let 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常見的輪播圖
很多頁面里，項目里，輪播圖幾乎是無處不在，今天我們就來說說輪播圖的寫法
在輪播圖數(shù)組list中，定義一個變量listIndex = 0表示第一張圖片，默認(rèn)渲染第一張圖片即list[listIndex]，然后獲取每張圖片的下標(biāo)。點擊切換圖片時把當(dāng)前圖片的下標(biāo)賦值給listIndex即可實現(xiàn)圖片切換顯示。
展示代碼
<template>
<div class="home">
<div class="box" @mouseout="out" @mouseover="over">
<img
v-for="(item, index) in list"
v-show="listIndex === index"
:key="index"
:src="item"
alt=""
/>
<p class="left" @click="changePage(prevIndex)"><</p>
<ul>
<li
:class="{ color: index == listIndex }"
v-for="(item, index) in list"
@click="changePage(index)"
:key="index"
></li>
</ul>
<p class="right" @click="changePage(nextIndex)">></p>
</div>
</div>
</template>
<script>
export default {
components: {},
props: {},
data() {
return {
list: [
require("../../public/image/1.jpg"),
require("../../public/image/2.jpg"),
require("../../public/image/3.jpg"),
require("../../public/image/4.jpg"),
],
listIndex: 0, //默認(rèn)顯示第幾張圖片
timer: null, //定時器
};
},
computed: {
//上一張
prevIndex() {
if (this.listIndex == 0) {
return this.list.length - 1;
} else {
return this.listIndex - 1;
}
},
//下一張
nextIndex() {
if (this.listIndex == this.list.length - 1) {
return 0;
} else {
return this.listIndex + 1;
}
},
},
methods: {
changePage(index) {
this.listIndex = index;
},
//移除
out() {
this.setTimer();
},
//移入
over() {
clearInterval(this.timer);
},
//1秒切圖
setTimer() {
this.timer = setInterval(() => {
this.listIndex++;
if (this.listIndex == this.list.length) {
this.listIndex = 0;
}
}, 1000);
},
},
created() {
//定時器
this.setTimer();
},
mounted() {},
};
</script>
<style scoped lang="less">
.home {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.box {
position: relative;
width: 500px;
height: 500px;
img {
width: 100%;
height: 100%;
z-index: 100;
}
p {
cursor: pointer;
color: white;
font-size: 28px;
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.5);
}
.left {
position: absolute;
top: 50%;
left: 0;
}
.right {
position: absolute;
top: 50%;
right: 0;
}
ul {
list-style: none;
display: flex;
justify-content: space-around;
align-items: center;
position: absolute;
width: 150px;
height: 20px;
top: 90%;
right: 35%;
.color {
background: red;
color: red;
}
li {
cursor: pointer;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
}
}
}
}
</style>以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項目環(huán)境搭建?啟動?移植操作示例及目錄結(jié)構(gòu)分析
這篇文章主要介紹了vue項目環(huán)境搭建、啟動、項目移植、項目目錄結(jié)構(gòu)分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪2022-04-04
這篇文章主要介紹了vue DatePicker日期選擇器時差8小時問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue微信分享 vue實現(xiàn)當(dāng)前頁面分享其他頁面
這篇文章主要為大家詳細(xì)介紹了vue微信分享功能，vue實現(xiàn)當(dāng)前頁面分享其他頁面，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
elementui之el-tebs瀏覽器卡死的問題和使用報錯未注冊問題
這篇文章主要介紹了elementui之el-tebs瀏覽器卡死的問題和使用報錯未注冊問題2019-07-07
前端的性能瓶頸那就是頁面的卡頓,當(dāng)然這種頁面的卡頓包含了多種原因,下面這篇文章主要給大家介紹了關(guān)于前端虛擬滾動列表實現(xiàn)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
解決vue項目刷新后,導(dǎo)航菜單高亮顯示的位置不對問題
今天小編就為大家分享一篇解決vue項目刷新后,導(dǎo)航菜單高亮顯示的位置不對問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue 不使用select實現(xiàn)下拉框功能(推薦)
這篇文章主要介紹了vue 不使用select實現(xiàn)下拉框功能,在文章給大家提到了vue select 組件的使用與禁用，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vue2.x版詳解computed和watch的使用，文章在基于vue框架的前端項目開發(fā)過程中，只要涉及到稍微復(fù)雜一點的業(yè)務(wù)，我們都會用到computed計算屬性這個鉤子函數(shù)，可以用于一些狀態(tài)的結(jié)合處理和緩存的操作2022-07-07
今天小編就為大家分享一篇VUE實現(xiàn)可隨意拖動的彈窗組件，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue.js 混入的相關(guān)資料，文中講解非常細(xì)致，示例代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07