使用Vue制作幻灯片

一、数据准备

在页面中的幻灯片一般都会作为一个组件,由父组件将幻灯片组件需要的数据传入,数据slides如下:

slides: [
            {
              src: require('../assets/slideShow/pic1.jpg'),
              title: 'xxx1',
              href: 'detail/analysis'
            },
            {
              src: require('../assets/slideShow/pic2.jpg'),
              title: 'xxx2',
              href: 'detail/count'
            },
            {
              src: require('../assets/slideShow/pic3.jpg'),
              title: 'xxx3',
              href: 'http://xxx.xxx.com'
            },
            {
              src: require('../assets/slideShow/pic4.jpg'),
              title: 'xxx4',
              href: 'detail/forecast'
            }
],

二、幻灯片的点击切换功能

组件内部需要一个data,nowIndex为当前正在显示的幻灯片的index,也是slides数组的下标。

data() {
    return {
        nowIndex: 0
    }
}

页面的html为

<div class="slide-show">
    <div class="slide-img">
        <a :href="slide[nowIndex].href">
            <img :src="slides[nowIndex].src">
        </a>
    </div>
    <h2>{{slides[nowIndex].title}}</h2>
    <ul class="slide-pages">
        <li @click="goto(pervIndex)">&lt;</li>
        <li v-for="(item, index) in slides" @click="goto(index)">
            <a :class="{on: index === nowIndex}">{{index + 1}}</a>
        </li>
        <li @click="nextIndex">&gt;</li>
    </ul>
</div>

这里我们定义了一个方法,goto接收一个参数index,跳转到指定页数

methods: {
    goto(index) {
        this.nowIndex = index;
    }
}

在点击前一页和后一页的时候我们用到了一个nextIndex和prevIndex,这两个变量我们定义在计算属性里


computed: {
    prevIndex() {
        if(this.nowIndex === 0) {
            return this.slides.length - 1;
        }else {
            return this.nowIndex - 1;
        }
    },
    nextIndex() {
        if(this.nowIndex === this.slides.length-1) {
            return 0;
        }else {
            return this.nowIndex + 1;
        }
    }
}

样式如下:

.slide-show {
    position: relative;
    width: 900px;
    height: 350px;
    margin: 15px 15px 15px 0;
    overflow: hidden;
  }
  .slide-img {
    width: 100%;
  }
  .slide-img img {
    width: 100%;
    position: absolute;
    top:0;
  }
  .slide-show h2 {
    position: absolute;
    bottom: 0;
    color: #fff;
    background-color: #000;
    opacity: 0.5;
    text-align: left;
    width: 100%;;
    height: 30px;
    line-height: 30px;
    padding-left: 15px;
  }
  .slide-pages {
    position: absolute;
    bottom: 10px;
    right: 15px;
  }
  .slide-pages li {
    display: inline-block;
    padding: 0 10px;
    cursor: pointer;
    color: #fff;
  }
  .slide-pages li .on {
    text-decoration: underline;
  }

三、自动播放

自动播放我们使用的方法是setInterval,为了让组件更加灵活,自动播放间隔的时间可以由父组件传入,inv为Number类型的props。 当鼠标移入时触发clearInv,鼠标移出时触发runInv

methods: {
    runInv() {
        this.invId = setInterval(() => {
            this.goto(this.nextIndex);
        }, this.inv);
    }
    clearInv() {
        clearInterval(this.invId);
    }
},
mounted() {
    this.runInv();
}

四、动画效果

动画效果就是在切换图片的时候,前一张离开,后一张进来,会有一个时刻两张图片同时存在。使用的是vue的transition. 组件中需要加入一个新的data,isShow为true时新的图片显示

data() {
    return {
        nowIndex: 0,
        isShow: false
    }
}

更改html显示图片的部分

<transiton name="slide-trans">
    <img v-if="isShow" :src="slides[nowIndex].src"/>
</transition>
<transition name="slide-trans-old">
    <img v-if="!isShow" :src="slides[nowIndex].src"/>
</transition>

第一个transition包含的为新要显示的图片,第二个transition包含的为将要消失的旧图片。 修改goto方法,在10ms后更改nowInex和isShow,这样在两个transition中就是不同的图片了

goto(index) {
    this.isShow = false;
    setTimeout(() => {
        this.isShow = true;
        this.nowIndex = index;
    })
}

在样式中加入

.slide-trans-enter-active {
    transition: all .5s;
  }
  .slide-trans-enter {
    transform: translateX(900px);
  }
  .slide-trans-old-leave-active {
    transition: all .5s;
    transform: translateX(-900px);
  }

原文地址:http://blog.csdn.net/haijing1995/article/details/78332809

JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里只属于前端工程师。