vue實(shí)現(xiàn)輪播圖的多種方式
更新時(shí)間：2024年02月01日 09:50:01 作者：竹竹竹竹竹子
這篇文章給大家介紹了vue實(shí)現(xiàn)輪播圖的多種方式,文中給出了四種實(shí)現(xiàn)方式,并通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,感興趣的朋友可以參考下
版本01 比較生硬
<template>
<div>
<div
class="carousel_middle_img"
@mouseover="changeInterval(true)"
@mouseleave="changeInterval(false)"
v-for="(item, index) in imgArr"
:key="'a' + index"
:style="{ background: 'url(' + item.url + ')' }"
v-show="index === currentIndex"
>
<!-- 左側(cè)按鈕 -->
<div
@click="clickIcon('up')"
class="carousel_middle_img_left_icon"
v-show="isShow"
></div>
<!-- 右側(cè)按鈕 -->
<div
@click="clickIcon('down')"
class="carousel_middle_img_right_icon"
v-show="isShow"
></div>
</div>
<!-- 控制圓點(diǎn) -->
<ul
class="carousel_banner_circle"
@mouseover="changeInterval(true)"
@mouseleave="changeInterval(false)"
>
<li
@click="changeImg(item.id)"
v-for="(item, index) in imgArr"
:key="index"
:class="index === currentIndex ? 'active' : ''"
></li>
</ul>
</div>
</template>
<script>
export default {
name: "Carousel",
data() {
return {
isShow: false,
isMouseEntered: false,
currentIndex: 0, //當(dāng)前所在圖片下標(biāo)
timer: null //定時(shí)輪詢
};
},
props: {
theme:"",
imgArr: {
type: Array,
required: true
}
},
methods: {
startInterval() {
clearInterval(this.timer);
this.timer = setInterval(() => {
this.currentIndex = (this.currentIndex + 1) % this.imgArr.length;
}, 3000);
},
clickIcon(val) {
if (val === "down") {
this.currentIndex++;
if (this.currentIndex === this.imgArr.length) {
this.currentIndex = 0;
}
} else {
if (this.currentIndex === 0) {
this.currentIndex = this.imgArr.length;
}
this.currentIndex--;
}
},
//點(diǎn)擊控制圓點(diǎn)
changeImg(index) {
this.currentIndex = index;
},
//鼠標(biāo)移入移出控制
changeInterval(val) {
if (val) {
clearInterval(this.timer);
this.isShow = true;
} else {
this.startInterval();
this.isShow = false;
}
},
},
//進(jìn)入頁面后啟動(dòng)定時(shí)輪詢
mounted() {
this.startInterval();
},
watch: {
currentIndex: {
handler(val) {
this.$emit("imgIdOnShow", val);
},
immediate: true
}
}
};
</script>
<style scoped>
* {
padding: 0;
margin-left: 0;
}
li {
list-style-type: none;
}
.carousel_middle_img {
position: relative;
width: 280px;
height: 160px;
background-size: cover !important;
z-index: 100;
}
.carousel_middle_img_left_icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 20px;
left: 0px;
background-image: url("./icon_left.png");
background-size: 16px 20px;
}
.carousel_middle_img_right_icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 20px;
right: 0px;
background-image: url("./icon_right.png");
background-size: 16px 20px;
}
.carousel_banner_circle {
position: absolute;
display: flex;
height: 12px;
top: 156px;
left: 292px;
border-radius: 7px;
background-color: rgba(0, 0, 0, 0.15);
}
.carousel_banner_circle li {
width: 6px;
height: 6px;
margin: 3px 4px;
border-radius: 5px;
background-color: #ffffff;
opacity: 0.5;
}
.active {
background-color: #ffffff !important;
opacity: 1 !important;
}
</style>
01silde
<template>
<div class="carousel_container">
<div
class="carousel_middle_img"
@mouseover="changeInterval(true)"
@mouseleave="changeInterval(false)"
v-for="(item, index) in imgArr"
:key="'a' + index"
:style="{ background: 'url(' + item.url + ')' }"
v-show="index === currentIndex"
>
<!-- 左側(cè)按鈕 -->
<div
@click="clickIcon('up')"
class="carousel_middle_img_left_icon"
v-show="isShow"
></div>
<!-- 右側(cè)按鈕 -->
<div
@click="clickIcon('down')"
class="carousel_middle_img_right_icon"
v-show="isShow"
></div>
</div>
<div
class="carousel_right_img"
@mouseover="moveImage(item.id)"
v-for="(item, index) in imgArr"
:key="'b' + index"
:style="{ background: 'url(' + item.url + ')' }"
v-show="index === (currentIndex + 1) % imgArr.length"
></div>
<div
class="carousel_left_img"
@mouseover="moveImage(item.id)"
v-for="(item, index) in imgArr"
:key="'c' + index"
:style="{ background: 'url(' + item.url + ')' }"
v-show="index === (currentIndex + imgArr.length - 1) % imgArr.length"
></div>
<!-- 控制圓點(diǎn) -->
<ul
class="carousel_banner_circle"
@mouseover="changeInterval(true)"
@mouseleave="changeInterval(false)"
>
<li
@click="changeImg(item.id)"
v-for="(item, index) in imgArr"
:key="index"
:class="index === currentIndex ? 'active' : ''"
></li>
</ul>
</div>
</template>
<script>
export default {
name: "Carousel",
data() {
return {
isShow: false,
isMouseEntered: false,
currentIndex: 0, //當(dāng)前所在圖片下標(biāo)
timer: null //定時(shí)輪詢
};
},
props: {
theme:"",
imgArr: {
type: Array,
required: true
}
},
methods: {
startInterval() {
clearInterval(this.timer);
this.timer = setInterval(() => {
this.currentIndex = (this.currentIndex + 1) % this.imgArr.length;
}, 3000);
},
clickIcon(val) {
if (val === "down") {
this.currentIndex++;
if (this.currentIndex === this.imgArr.length) {
this.currentIndex = 0;
}
} else {
if (this.currentIndex === 0) {
this.currentIndex = this.imgArr.length;
}
this.currentIndex--;
}
},
//點(diǎn)擊控制圓點(diǎn)
changeImg(index) {
this.currentIndex = index;
},
//鼠標(biāo)移入移出控制
changeInterval(val) {
if (val) {
clearInterval(this.timer);
this.isShow = true;
} else {
this.startInterval();
this.isShow = false;
}
},
//移入左右圖片放大
moveImage(index) {
if (!this.isMouseEntered) {
clearInterval(this.timer);
this.currentIndex = index;
this.isMouseEntered = true;
} else {
this.startInterval();
this.isMouseEntered = false;
}
}
},
//進(jìn)入頁面后啟動(dòng)定時(shí)輪詢
mounted() {
this.startInterval();
},
watch: {
currentIndex: {
handler(val) {
this.$emit("imgIdOnShow", val);
},
immediate: true
}
}
};
</script>
<style scoped>
* {
padding: 0;
margin-left: 0;
}
li {
list-style-type: none;
}
.carousel_container {
position: relative;
text-align: justify;
width: 640px;
height: 184px;
}
.carousel_middle_img {
position: absolute;
left: 180px;
width: 280px;
height: 160px;
background-size: cover !important;
z-index: 100;
}
.carousel_left_img {
top:10px;
opacity: 0.4;
left: 0;
position: absolute;
width: 240px;
height: 136px;
background-size: cover !important;
}
.carousel_right_img {
top:10px;
background-size: cover !important;
opacity: 0.4;
right: 0;
position: absolute;
width: 240px;
height: 136px;
}
.carousel_middle_img_left_icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 20px;
left: 0px;
background-image: url("./icon_left.png");
background-size: 16px 20px;
}
.carousel_middle_img_right_icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 20px;
right: 0px;
background-image: url("./icon_right.png");
background-size: 16px 20px;
}
.carousel_banner_circle {
position: absolute;
display: flex;
height: 12px;
top: 156px;
left: 292px;
border-radius: 7px;
background-color: rgba(0, 0, 0, 0.15);
}
.carousel_banner_circle li {
width: 6px;
height: 6px;
margin: 3px 4px;
border-radius: 5px;
background-color: #ffffff;
opacity: 0.5;
}
.active {
background-color: #ffffff !important;
opacity: 1 !important;
}
</style>
水平輪播
<template>
<div class="carousel">
<div class="carousel_container"
@mouseover="changeInterval(true)"
@mouseleave="changeInterval(false)">
<img
v-for="(item, index) in imgArr"
:key="index"
:src="item.url"
:style="{ left: index * 100 + '%', transform: Style }"
/>
<div class="carousel_middle_img_left_icon" v-show="isShow" @click="prev()"></div>
<div class="carousel_middle_img_right_icon" v-show="isShow" @click="next()" ></div>
<div v-show="theme==='Normal_one'"
class="carousel_banner">
<div class="carousel_banner_circle"
v-show="isShow"
@click="changeImg(index)"
v-for="(item, index) in imgArr"
:key="'b' + index"
:class="index === currentIndex ? 'active' : ''"
></div>
</div>
</div>
<div v-show="theme==='Normal_two'"
class="carousel_banner">
<div class="carousel_banner_circle"
@click="changeImg(index)"
v-for="(item, index) in imgArr"
:key="'c' + index"
:class="index === currentIndex ? 'active' : ''"
></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
Style: "",
currentIndex: 0,
timer: null,
isShow: false,
config: []
};
},
props: {
theme:"",
imgArr: {
type: Array,
required: true
}
},
mounted() {
// 自動(dòng)播放動(dòng)畫
this.startInterval();
},
methods: {
// 定時(shí)器
startInterval() {
this.timer = setInterval(() => {
this.currentIndex = (this.currentIndex + 1) % this.imgArr.length;
this.setStyle();
}, 3000);
},
changeInterval(val) {
if (val) {
clearInterval(this.timer);
this.isShow = true;
} else {
this.startInterval();
this.isShow = false;
}
},
next() {
this.currentIndex = (this.currentIndex + 1) % this.imgArr.length;
this.setStyle();
},
prev() {
this.config.push(this.config.shift());
this.currentIndex = (this.currentIndex - 1 + this.imgArr.length) % this.imgArr.length;
this.setStyle();
},
// 圖片動(dòng)畫
setStyle() {
this.Style = `translatex(-${this.currentIndex * 100}%)`;
},
//點(diǎn)擊控制圓點(diǎn)
changeImg(index) {
if(index > this.currentIndex){
for(let i = 0;i<= index - this.currentIndex;i++){
this.next();
}
}else if(index < this.currentIndex){
for(let i = 0;i<= this.currentIndex - index;i++){
this.prev();
}
}
this.currentIndex = index;
},
}
};
</script>
<style scoped>
.carousel{
position: relative;
width: 100%;
height: 340px;
}
.carousel_container {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.carousel_container img {
display: inline-block;
position: absolute;
width: inherit;
margin: 0;
padding: 0;
top: 0;
left: 0;
height: 100%;
transition: 0.5s transform ease-in-out;
}
.carousel_middle_img_left_icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 20px;
left: 0px;
background-image: url("./icon_left.png");
background-size: 16px 20px;
z-index: 999;
}
.carousel_middle_img_right_icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 20px;
right: 0px;
background-image: url("./icon_right.png");
background-size: 16px 20px;
z-index: 999;
}
.carousel_banner {
position: absolute;
display: flex;
height: 3.6%;
left: 50%;
transform: translate(-50%);
bottom: 4%;
margin-bottom: 0;
padding-left: 0;
border-radius: 7px;
background-color: rgba(0, 0, 0, 0.15);
}
.carousel_banner_circle{
width: 6px;
height: 6px;
margin: 3px 6px;
border-radius: 5px;
background-color: #ffffff;
opacity: 0.5;
}
.active {
background-color: #ffffff !important;
opacity: 1 !important;
}
</style>
垂直實(shí)現(xiàn)卡片輪播
<template>
<div>
<div>
<div
class="carousel_container"
@mouseover="changeInterval(true)"
@mouseleave="changeInterval(false)"
>
<div
v-for="(item, index) in imgArr"
:style="config[index]"
:key="index"
>
<img :src="item.url" style="width: 100%; height: 100%;" />
</div>
<div class="carousel_mid_img"></div>
<div class="carousel_left_img" @click="prev()"></div>
<div class="carousel_right_img" @click="next()"></div>
<div class="carousel_banner">
<div class="carousel_banner_circle"
@click="changeImg(index)"
v-for="(item, index) in imgArr"
:key="'b' + index"
:class="index === currentIndex ? 'active' : ''"
></div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Carousel",
data() {
return {
timer: null,
currentIndex: 0,
startX: "",
endX: "",
config: [
{
id: "left",
position: "absolute",
width: "48%",
height: "74%",
top: "8%",
left: "0",
opacity: 0.4,
zIndex: 1,
transition: ".3s"
},
{
id: "center",
position: "absolute",
width: "59%",
height: "91%",
top: "0px",
left: "20%",
opacity: 1,
zIndex: 2,
transition: ".3s"
},
{
id: "right",
position: "absolute",
width: "48%",
height: "74%",
top: "8%",
right: "0",
opacity: 0.4,
zIndex: 1,
transition: ".3s"
}
]
};
},
props: {
imgArr: {
type: Array,
required: true
}
},
methods: {
//定時(shí)器
startInterval() {
clearInterval(this.timer);
this.timer = setInterval(() => {
this.next();
}, 3000);
},
//鼠標(biāo)移入移出控制
changeInterval(val) {
if (val) {
clearInterval(this.timer);
} else {
this.startInterval();
}
},
prev() {
this.config.push(this.config.shift());
this.currentIndex = (this.currentIndex + this.imgArr.length - 1) % this.imgArr.length;
this.centerIndex("prev");
},
next() {
this.config.unshift(this.config.pop());
this.currentIndex = (this.currentIndex + 1) % this.imgArr.length;
this.centerIndex("next");
},
//點(diǎn)擊控制圓點(diǎn)
changeImg(index) {
if(index > this.currentIndex){
for(let i = 0;i<= index - this.currentIndex;i++){
this.next();
}
}else if(index < this.currentIndex){
for(let i = 0;i<= this.currentIndex - index;i++){
this.prev();
}
}
this.currentIndex = index;
},
// 當(dāng)前imgArr在位置上的index（并非img數(shù)組的index）
centerIndex(val) {
if (val == "prev") {
for (let val of this.imgArr) {
if (val.index == this.imgArr.length - 1) {
val.index = 0;
} else {
val.index = val.index + 1;
}
}
} else {
for (let val of this.imgArr) {
if (val.index == 0) {
val.index = this.imgArr.length - 1;
} else {
val.index = val.index - 1;
}
}
}
},
//增加圖片數(shù)目
addCardStyle() {
if (this.imgArr.length > 3) {
for (let i = 0; i < this.imgArr.length - 3; i++) {
this.config.push({
id: "center",
position: "absolute",
width: "44%",
height: "87%",
top: "0px",
left: "28%",
opacity: 0,
transition: ".3s"
});
}
}
}
},
mounted() {
this.startInterval();
},
watch: {
currentIndex: {
handler(val) {
this.$emit("imgOnShow", this.imgArr[val]);
},
immediate: true
}
},
created() {
this.addCardStyle(); // 加入樣式位置的index
}
};
</script>
<style scoped>
.carousel_container {
width: 100%;
height: 328px;
position: relative;
overflow: hidden;
}
.carousel_mid_img {
top: 0;
left: 20%;
position: absolute;
width: 59%;
height: 91%;
z-index: 100;
}
.carousel_left_img {
position: absolute;
width: 20%;
height: 74%;
top: 8%;
left: 0;
z-index: 99 !important;
}
.carousel_right_img {
position: absolute;
width: 21%;
height: 74%;
top: 8%;
right: 0;
z-index: 99 !important;
}
.carousel_banner {
position: absolute;
display: flex;
height: 3.6%;
left: 50%;
transform: translate(-50%);
bottom: 0;
margin-bottom: 0;
padding-left: 0;
border-radius: 7px;
background-color: rgba(0, 0, 0, 0.15);
}
.carousel_banner_circle{
width: 6px;
height: 6px;
margin: 3px 6px;
border-radius: 5px;
background-color: #ffffff;
opacity: 0.5;
}
.active {
background-color: #ffffff !important;
opacity: 1 !important;
}
</style>
test.vue
<template>
<div class="div_container">
<!-- v-bind （：）將元素item-left的屬性與組件的itemLeft屬性保持一致-->
<!-- <transfer-box :title="title" :item-left="itemLeft" :item-right="itemRight" :theme="theme" @selectedItem="selectedItem"></transfer-box>-->
<!-- <transfer-box :title="title" :item-left="itemLeft" :item-right="itemRight" @selectedItem="selectedItem" />-->
<!-- <Carousel :img-arr="imgArr" @imgOnShow="imgOnShow"></Carousel>-->
<carousel-horizontal :img-arr="imgArr" :theme="theme" @imgOnShow="imgOnShow"></carousel-horizontal>
</div>
</template>
<script>
import CarouselHorizontal from "../components/Carousel/CarouselHorizontal"
export default {
components: {CarouselHorizontal},
data() {
return {
theme:'Normal_two',
imgArr: [
{ id: 0,
url: require("../components/Carousel/fig1.jpg"),
},
{
id: 1,
url: require("../components/Carousel/fig2.jpg"),
},
{
id: 2,
url: require("../components/Carousel/fig4.jpg"),
},
{
id: 3,
url: require("../components/Carousel/fig5.png"),
}
]
};
},
methods: {
imgOnShow(item) {
console.log(item)
}
}
};
</stricpt>
到此這篇關(guān)于vue實(shí)現(xiàn)輪播圖的多種方式的文章就介紹到這了,更多相關(guān)vue實(shí)現(xiàn)輪播圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了深度解析?Vue3?的響應(yīng)式機(jī)制，今天就帶大家深入了解一下 Vue 3 的響應(yīng)式機(jī)制，相信學(xué)完今天的內(nèi)容，會對響應(yīng)式機(jī)制有更深地體會；文章會結(jié)合代碼示例，幫大家掌握響應(yīng)式機(jī)制的進(jìn)階用法，讓我們正式開始學(xué)習(xí)吧2022-09-09
利用Vue構(gòu)造器創(chuàng)建Form組件的通用解決方法
這篇文章主要給大家介紹了關(guān)于利用Vue構(gòu)造器創(chuàng)建Form組件的通用解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章主要給大家介紹了關(guān)于Vue表格組件Vxe-table使用技巧的相關(guān)資料,文中還介紹了VXEtable展示指定行所遇到得問題,對大家學(xué)習(xí)或者使用Vxe-table具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-09-09
在Vue3中使用Vue Tour實(shí)現(xiàn)頁面導(dǎo)覽
Vue Tour 是一個(gè)方便的 Vue.js 插件,它可以幫助我們在網(wǎng)站或應(yīng)用中實(shí)現(xiàn)簡單而靈活的頁面導(dǎo)覽功能,本文我們將介紹如何在 Vue 3 中使用 Vue Tour,并通過示例代碼演示其基本用法,需要的朋友可以參考下2024-04-04
Vue項(xiàng)目中使用百度地圖api的詳細(xì)步驟
在之前的一個(gè)小項(xiàng)目中,用到的顯示當(dāng)?shù)氐牡貓D功能,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中使用百度地圖api的詳細(xì)步驟,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
本文介紹了如何使用Vue 3編寫一個(gè)帶提示的表格組件,并假設(shè)每行都有一個(gè)保存按鈕,如果需要全部保存,還會加上驗(yàn)證,感興趣的朋友一起看看吧2025-02-02
公司內(nèi)部一直有大屏的需求,也一直再做,中途也踩了一些坑,但是沒有認(rèn)真的來總結(jié)下,下面這篇文章主要給大家介紹了關(guān)于如何在vue項(xiàng)目中使用rem布局的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要介紹了淺談vuex為什么不建議在action中修改state，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了vue使用websocket連接優(yōu)化性能方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
解決vue keep-alive 數(shù)據(jù)更新的問題
今天小編就為大家分享一篇解決vue keep-alive 數(shù)據(jù)更新的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09