vue—轮播效果
代码演示:
<div id="app">
<div class="carousel" @mouseover='stop()' @mouseout='play()'>
<transition-group tag="ul" class="slide" name="image">
<!-- v-show="index==mark" 如果 当前这个元素的索引值 正好 等于 此刻mark变量里的值,我们让当前这个li元素显示 -->
<li v-for="(item,index) in list" :key="index" v-show="index==mark"> <img :src="item" alt=""> </li>
</transition-group>
<div class="bullet"> <span v-for="(item,index) in list.length" :class="{active:index==mark}"
@click="change(index)"></span> </div>
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
list-style: none;
}
.carousel {
width: 500px;
height: 300px;
margin: 20px auto 0;
position: relative;
overflow: hidden;
}
.slide {
width: 500px;
height: 300px;
}
.slide li {
position: absolute;
left: 0;
top: 0;
}
.slide li img {
width: 500px;
height: 300px;
}
.bullet {
width: 100%;
position: absolute;
left: 0;
bottom: 10px;
text-align: center;
z-index: 10;
}
.bullet span {
display: inline-block;
width: 20px;
height: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
margin-right: 10px;
cursor: pointer;
}
/* span标签,高亮显示的样式 */
.bullet span.active {
background-color: orange;
border: 1px solid yellow;
}
/* 进入过渡的过程中 */
.image-enter-active {
/* 在进入的过渡的过程中,我--li 要 从 ul这个容器 中 发生 水平偏移 */
transform: translateX(0);
transition: all 1s ease;
}
/* 离开过渡的过程中*/
.image-leave-active {
transform: translateX(-100%);
transition: all 1s ease;
}
/* 刚进入过渡*/
.image-enter {
/* 刚开始,我--li 在 ul这个容器里 */
transform: translateX(100%);
}
/* 刚要离开过渡 */
.image-leave {
/* 刚要离开的时候,我--li 在ul这个容器的 左上角那个点上 */
transform: translateX(0)
}
JavaScript
let vm = new Vue({
el: '#app',
data: {
timer: null,
mark: 0,
list: ['img/1.jpg', 'img/2.jpg', 'img/3.png', 'img/4.png', 'img/5.png', 'img/6.png', 'img/7.jpg', 'img/8.jpg']
},
// 生命周期钩子函数
created: function () {
// 调用执行play方法
this.play();
},
methods: {
change: function (index) {
this.mark = index;
console.log(this.mark);
},
autoPlay: function () {
this.mark++;
if (this.mark >= this.list.length) {
this.mark = 0;
}
},
play: function () {
// 设置 定时器
this.timer = setInterval(this.autoPlay, 1000)
},
// 清除定时器
stop: function () {
clearInterval(this.timer)
}
}
})
大致思路:
1、用transition-group来包裹需要添加动画的标签,并用tag=“ul”,name=“image”
2、用v-for=“(item,index) in list”将数据中心所有图片遍历出来 添加:key=“index”
v-show=“indexmark" 如果当前这个元素的索引值正好等于此刻mark变量里的值,我们让当前这个li元素显示
3、在动画组之外设置点,<span v-for=“(item,index) in list.length” :class="{active:indexmark}” @click=“change(index)”>
用v-for遍历数组长度的点,@click="change(index)"方法中心中让change函数让this.mark = index;,当点击白点时可以获得当前点的索引值,并为之添加active类名
4、为大盒子添加定时器:
@mouseover=‘stop()’ @mouseout='play()'调用与清除定时器
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果