1. Click the button to switch the carousel
Code:
<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>Second, the timer, automatic carousel
Code:
<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>