vue练习demo 实现简单的轮播图,方法简单快捷,使用到transition-group标签增加用户体验 以及vue中的class与style绑定

结构代码:  

　　

<div class="slider">
            <div class="slidershow">
                <!-- <transition-group tag="ul"> -->
                <transition-group tag="ul" class="ul" name="list">    
                    <li class="li1" v-for="(item,index) in imgData" v-show="index===selectedIndex" :key="index">
                        <a href="#">
                            <img :src="item" alt="">
                        </a>
                    </li>
                </transition-group >
                <div class="span_box">
                    <span v-for="(item,index) in imgData" @click="change(index)" :class="index==selectedIndex?'active':''" :key="index"></span>
                </div>
            </div>

        </div>

js代码: 

export default {
        data(){
            return {
                selectedIndex: 0,
                imgData: [
                    'static/img/banner-1.jpg',
                    'static/img/banner-2.jpg',
                    'static/img/banner-3.jpg',
                    'static/img/banner-4.jpg',
                ]
            }
        },
        methods: {
            change(i) {
                // console.log(i)
                this.selectedIndex = i
            },
            aotuPlay(){
                this.selectedIndex++
                if(this.selectedIndex>3){
                    this.selectedIndex=0
                }
                
            },
            go(){
                var interval = setInterval(() => {
                    this.aotuPlay()
                }, 4000);
            }
            
        },
        created(){
            this.go()
        }
    }

css样式代码: 

.slider {
    width: 1000px;
    height: 400px;
    overflow: hidden;
    margin: 50px auto;
    position: relative;
    border: 1px solid #000;
    .slidershow {
        width: 100%;
        height: 100%;
        .ul {
            li {
                position: absolute;
                img {
                    width: 1000px;
                    height: 400px;
                }
            }
        }
        .span_box {
            position: absolute;
            display: flex;
            align-items: center;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            span {
                width: 20px;
                height: 5px;
                border: 1px solid pink;
                background-color: pink;
                margin-right: 10px;                
            }
            .active {
                background-color: red;
            }
        }
        .list-enter-to {  //实现图片轮播的过渡效果
            transition: all 1s ease;
            transform: translateX(0);
        }

        .list-leave-active {
            transition: all 1s ease;
            transform: translateX(-100%)
        }

        .list-enter {
            transform: translateX(100%)
        }

        .list-leave {
            transform: translateX(0)
        }
    }
}

.list-enter-to {  //实现图片轮播的过渡效果
            transition: all 1s ease;
            transform: translateX(0);
        }

        .list-leave-active {
            transition: all 1s ease;
            transform: translateX(-100%)
        }

        .list-enter {
            transform: translateX(100%)
        }

        .list-leave {
            transform: translateX(0)
        }

这部分样式主要是实现过渡的效果  如有不了解可以看文档class与style绑定(https://cn.vuejs.org/v2/guide/class-and-style.html)

比较简单的轮播图  效果图如下