欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue实现图片切换效果

程序员文章站 2022-03-28 13:48:31
...

思路:

整个代码部分分为轮播图片和控制span两个部分。

按照前端工程化的需求来说,这两个部分应该解耦成两个component最后再导入页面比较合理,但由于demo较为简单,

作为练手就不搞那么复杂了。

先写出整体代码框架:

<div id="banner" class="slide" style="padding-top: 5px;">
	<div v-for="(item, index) in bannerList" v-show="index===mark" :key="index" class="slideShow">
		<a href="">
			<img :src="item.image" alt="" style="width: 100%; height: 2.9rem;">
		</a>
	</div>
	<div class="bor">
		<span v-for="(item, index) in bannerList" :class="{'actives': index===mark}" :key="index"></span>
	</div>
</div>

我们使用v-for列表渲染两个部分,值得注意的是列表渲染最好要提供一个key值,至于为什么官方文档说得很复杂,

就我所知的是如果不加key值在使用transition-group也就是过渡效果的时候会出现bug,官方给出的建议也是尽可能

在列表渲染的时候加上key值,百利无一害,养成习惯就好。
创建定时器,每隔2s给变量mark+1,挂载到钩子函数created:

<script> 
export default {  
  data () {  
    return {  
      mark: 0, //比对图片索引的变量  
      bannerList:[] 
    }  
  },  
  methods: {  
    autoPlay () {  
      this.mark++;  
      if (this.mark === 3) { //当遍历到最后一张图片置零  
        this.mark = 0  
      }  
    },  
    play () {  
      setInterval(this.autoPlay, 2000)  
    },  
    change (i) {  
      this.mark = i  
    }  
  },  
  created () {  
    this.play()  
  }  
}  
</script> 

加上css文件,出现基本的效果。

<style>  
  .slide {  
    width: 950px;  
    height: 150px;  
    margin: 0 auto;  
    margin-top: 50px;  
    overflow: hidden;  
    position: relative;  
  }  
  .slideshow {  
    width: 95px;  
    height: 150px;  
  }  
  li {  
    position: absolute;  
  }  
  img {  
    width: 95px;  
    height: 150px;  
  }  
  .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: #bfd6b6 !important;  
  }  
</style>