一、点击按钮切换轮播

【Vue】通过Vue实现轮播图的两种示例(简单清晰+图文+完整源代码)_vue

 代码:

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图案例</title>
<script src="js/vue/vue.js"></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}

#card_list {
position: relative;
height: 900px;
overflow: hidden;
background-color: black;
}

.card_list_1 {
height: 200px;
width: 100%;
background-color: rgb(232, 232, 232);
text-align: center;
line-height: 200px;
position: absolute;
top: 0;
left: 0;
}


/* 左右切换动画 */

.v-enter-active {
animation: move_come 1s;
/* 显示卡片动画 */
}

.v-leave-active {
animation: move_go 1s;
/* 隐藏卡片动画 */
}


/* 显示卡片动画 */
@keyframes move_come {

/* 起点 */
from {
transform: translateX(100%);
}

/* 终点 */
to {
transform: translateX(0px);
}
}

/* 隐藏卡片动画 */
@keyframes move_go {

/* 起点 */
from {
transform: translateX(0px);
}

/* 终点 */
to {
transform: translateX(-100%);
}
}
</style>

<body>

<div id="app">

<div class="card_button">
<button @click="card_click()">切换</button>
</div>

<div id="card_list">

<transition-group>

<div v-for="(item,index) of card_list" v-show="item==1" :key="index" class="card_list_1">
卡片{{index}}
</div>

</transition-group>

</div>
</div>


</body>

<!-- 选中效果 -->
<script>

var app = new Vue({

el: "#app",
data: {
card_list: ["1", "0", "0", "0", "0"], // 第2步,每增加一个transition卡片,需要在数组中增加一个数值
now_state: 0 // 当前显示第几个卡片(数组从0开始)
},
methods: {

card_click() {

Vue.set(this.card_list, this.now_state, "0"); // 先把当前卡片隐藏
if (this.now_state == this.card_list.length - 1) {
this.now_state = 0;
}
else {
this.now_state = this.now_state + 1
}
Vue.set(this.card_list, this.now_state, "1"); // 显示下一张卡片
}

},

})

</script>

二、定时器,自动轮播图

【Vue】通过Vue实现轮播图的两种示例(简单清晰+图文+完整源代码)_vue_02

 代码:

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图案例</title>
<script src="js/vue/vue.js"></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}

#card_list {
position: relative;
height: 900px;
overflow: hidden;
background-color: black;
}

.card_list_1 {
height: 200px;
width: 100%;
background-color: rgb(232, 232, 232);
text-align: center;
line-height: 200px;
position: absolute;
top: 0;
left: 0;
}


/* 左右切换动画 */

.v-enter-active {
animation: move_come 1s;
/* 显示卡片动画 */
}

.v-leave-active {
animation: move_go 1s;
/* 隐藏卡片动画 */
}


/* 显示卡片动画 */
@keyframes move_come {

/* 起点 */
from {
transform: translateX(100%);
}

/* 终点 */
to {
transform: translateX(0px);
}
}

/* 隐藏卡片动画 */
@keyframes move_go {

/* 起点 */
from {
transform: translateX(0px);
}

/* 终点 */
to {
transform: translateX(-100%);
}
}
</style>

<body>

<div id="app">

<div id="card_list">

<transition-group>

<div v-for="(item,index) of card_list" v-show="item==1" :key="index" class="card_list_1">
卡片{{index}}
</div>

</transition-group>

</div>
</div>


</body>

<!-- 选中效果 -->
<script>

var app = new Vue({

el: "#app",
data: {
card_list: ["1", "0", "0", "0", "0"], // 第2步,每增加一个transition卡片,需要在数组中增加一个数值
now_state: 0 // 当前显示第几个卡片(数组从0开始)
},
mounted() {

this.timer=setInterval(()=>{
Vue.set(this.card_list, this.now_state, "0"); // 先把当前卡片隐藏
if (this.now_state == this.card_list.length - 1) {
this.now_state = 0;
}
else {
this.now_state = this.now_state + 1
}
Vue.set(this.card_list, this.now_state, "1");// 显示下一张卡片
}
,3000)
},

})

</script>