创建定时器,每隔2.5s给变量mark+1,挂载到钩子函数created:
export default { data () { return { mark: 0, //比对图片索引的变量 imgArray: [ '../static/timg1.jpg', '../static/timg2.jpg', '../static/timg3.jpg', '../static/timg4.jpg' ] } }, methods: { autoPlay () { this.mark++; if (this.mark === 4) { //当遍历到最后一张图片置零 this.mark = 0 } }, play () { setInterval(this.autoPlay, 2500) }, change (i) { this.mark = i } }, created () { this.play() } } </script>
第四步:
加上css文件,出现基本的效果。
<style> * { margin: 0; padding: 0; list-style: none; } .slide { width: 1024px; height: 320px; margin: 0 auto; margin-top: 50px; overflow: hidden; position: relative; } .slideshow { width: 1024px; height: 320px; } li { position: absolute; } img { width: 1024px; height: 320px; } .bar { position: absolute; width: 100%; bottom: 10px; margin: 0 auto; z-index: 10; text-align: center; } .bar span { width: 20px; height: 5px; border: 1px solid; background: white; display: inline-block; margin-right: 10px; } .active { background: red !important; } </style>
第五步:
现在我们得到的效果还是每隔一段时间图片突然变成另外一张,用户体验很差,达不到轮播的效果。
所以我们得加上过渡效果。
html:
<transition-group tag="ul" name="image"> <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index"> <a href="#"> <img :src='img'> </a> </li> </transition-group>
css:
.image-enter-active { transform: translateX(0); transition: all 1.5s ease; } .image-leave-active { transform: translateX(-100%); transition: all 1.5s ease; } .image-enter { transform: translateX(100%); } .image-leave { transform: translateX(0); }
这里因为我们是给一个渲染列表加上过渡效果所以要使用transition-group而不是单元素的transition,否则会报错。
另外就是记得给transition-group加上tag="ul"属性,不然就会被默认渲染成span了。
css部分需要关联name属性值作为前缀。
第六步:
给下方按钮增加切换图片的点击事件。
最后我们再加上移入/移出实现关闭/打开定时器效果,即用户鼠标停留当前图片停止滚动,移出则继续。
<template> <div class="slide" v-on:mouseover="stop()" v-on:mouseout="move()"> <div class="slideshow"> <transition-group tag="ul" name="image"> <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index"> <a href="#"> <img :src='img'> </a> </li> </transition-group> </div> <div class="bullet"> <span v-for="(item, index) in imgArray" :class="{ 'active':index===mark }" @click="change(index)" :key="index"></span> </div> </div> </template> <script> export default { data () { return { timer: null, //定时器 mark: 0, //比对图片索引的变量 imgArray: [ '../static/timg1.jpg', '../static/timg2.jpg', '../static/timg3.jpg', '../static/timg4.jpg' ] } }, methods: { autoPlay () { this.mark++; if (this.mark === 4) { this.mark = 0 } }, play () { this.timer = setInterval(this.autoPlay, 2500) }, change (i) { this.mark = i }, stop () { clearInterval(this.timer) }, move () { this.timer = setInterval(this.autoPlay, 2500) } }, created () { this.play() } } </script>
内容版权声明:除非注明,否则皆为本站原创文章。