vue实现幻灯片切换效果

最新推荐文章于 2024-05-21 22:30:21 发布

原创最新推荐文章于 2024-05-21 22:30:21 发布 · 802 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #css3

Element + VUE 专栏收录该内容

29 篇文章

订阅专栏

本文介绍如何利用Vue.js结合HTML和CSS3来实现动态幻灯片切换效果。首先，设置HTML结构，然后通过Vue.js进行数据绑定和事件监听以控制幻灯片的显示和切换，最后应用CSS样式完成动画效果。

1、html

<div class="forestScene">
    <div class="forestScenePic">
        <div class="activePhoto">
            <img :src="indexData.photos[indexData.activePhoto]">
        </div>
        <div class="smallPicture">
            <div class="thumbnail" v-for="(item, index) in indexData.photos" :key="index"
                 @click="changePhoto(index)" :class="{'active': indexData.activePhoto == index}">
                <img :src="item">
            </div>
        </div>
    </div>
</div>

2、Vue.js

data () {
    rerurn {
        activePhoto: '',
        photos: [
          require('@/assets/img/dataCenter/forest.jpg'),
          require('@/assets/img/dataCenter/forest.jpg'),
          require('@/assets/img/dataCenter/forest.jpg'),
          require('@/assets/img/dataCenter/forest.jpg'),
          require('@/assets/img/dataCenter/forest.jpg'),
          require('@/assets/img/dataCenter/forest.jpg'),
          require('@/assets/img/dataCenter/forest.jpg'),
          require('@/assets/img/dataCenter/forest.jpg')
        ]
    }
},
mounted () {
    this.changePhoto(0)
}
methods: {
    changePhoto (index) {
      this.indexData.activePhoto = index
    },
    nextPhoto () {
      this.changePhoto(this.indexData.activePhoto + 1 < this.indexData.photos.length ? this.indexData.activePhoto + 1 : 0)
    },
    previousPhoto () {
      this.changePhoto(this.indexData.activePhoto - 1 >= 0 ? this.indexData.activePhoto - 1 : this.indexData.photos.length - 1)
    }
}

3、CSS

.forestScene{
  display: block;
  height: 780px;
  overflow: hidden;
  margin: 0 auto;
}
.forestScenePic{
  .activePhoto{
    margin: 0 auto 10px auto;
    width: 99%;
    height: 545px;
    overflow: hidden;
  }
  .activePhoto img{
    width: 100%;
    height: 545px;
    border: 3px solid #006cbf;
    position: relative;
    border-radius: 10px;
  }
  .smallPicture .thumbnail{
    width: 19%;
    height: 100px;
    margin: 5px 0.5% 0 0.5%;
    display: inline-block;
    overflow: hidden;
  }
  .smallPicture .thumbnail img{
    width: 100%;
    height: 100px;
    border: 1px solid #fff;
    cursor: pointer;
    opacity: 1;
  }
  .smallPicture .thumbnail:hover img{
    opacity: 0.6;
  }
  .smallPicture .thumbnail.active img{
    border-color: #05FFF9;
    opacity: 1;
  }
}