SOURCE

var vm = new Vue({
    el: "#app",
    data: {
        currentIndex: 0,
        list: [
            { id: 1, title: '《西游记》', writer: '吴承恩', imgsrc: 'img/1.jpg' },
            { id: 2, title: '《水浒传》', writer: '施耐庵', imgsrc: 'img/4.jpg' },
            { id: 3, title: '《三国演义》', writer: '罗贯中', imgsrc: 'img/3.jpg' },
            { id: 4, title: '《红楼梦》', writer: '曹雪芹', imgsrc: 'img/2.jpg' }
        ],
        timer: ''
    },
    methods: {
        handle: function (index) {
            this.currentIndex = index
        },
        change: function () {
            this.currentIndex++
            this.currentIndex = this.currentIndex % 4
            console.log(this.currentIndex)
        },
        play: function () {
            this.timer = setInterval(this.change, 1111)
        },
        stop: function () {
            clearInterval(this.timer)
        }
    }
})

<div id="app">
	<div class="title">
		<ul>
			<li :class="currentIndex==index?'active':''" v-for="(item,index) in list" @mouseover="handle(index)">{{item.title}}</li>
		</ul>
	</div>
	<div class="content">
		<ul>
			<li :class="currentIndex==index?'active':''" v-for="(item,index) in list"><img :src="item.imgsrc"/></li>
			</ul>
		</div>
		<div class="control">
			<button @click="change">切换</button>
			<button @click="play">播放</button>
			<button @click="stop">停止</button>
		</div>
	</div>

html,
body {
    margin: 0;
    padding: 0;
}

#app {
    margin: 0 auto;
    text-align: center;
    width: 424px;
}

#app .title ul,
li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#app .title ul li {
    display: inline-block;
    width: 100px;
    height: 40px;
    border: 2px solid #222222;
    line-height: 40px;
    text-align: center;
    border: 1px solid #080808;
    margin: 0 2px
}

#app .title ul li.active {
    background: #985F0D;
}

#app .content ul,
li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#app .content ul li {
    display: none;
    border: 1px solid #1B6D85;
    width: 422px;
}

#app .content ul li.active {
    display: block;
}

#app .content ul li img {
    width: 100%;
}