1、安装 vue-awesome-swiper

使用vue开发界面时，很多时候需要用到轮播图，有的时候需要在一个页面中使用多个轮播图，这个时候就需要用到单独的，鼠标移入暂停自动轮播，鼠标移出再次自动轮播。

npm install vue-awesome-swiper

2、代码部分

<template>
    <div class="icontent">
        <div @mouseenter="on_top_enter" @mouseleave="on_top_leave">
			<!-- 加上v-if="banner_data.length > 1" 来防止swiper出现无法循环播放的效果 -->
			<swiper class="my-swiper" v-if="banner_data.length > 1" :options="swiperOption" ref="mySwiper">
		    <!-- slides -->
		    <swiper-slide v-for="ba_data in banner_data">
		        <img :src="ba_data.img_url" alt="banner">
		    </swiper-slide>
		    <!-- 分页控制器 -->
		    <div class="swiper-pagination"  slot="pagination"></div>
		    <!-- 上一页 -->
		    <div class="swiper-button-prev" slot="button-prev"></div>
		    <!-- 下一页 -->
		    <div class="swiper-button-next" slot="button-next"></div>
			</swiper>
        </div>
		<div class="my-swiper" @mouseenter="on_bot_enter" @mouseleave="on_bot_leave">
            <swiper class="bafang_swiper" v-if="bannerbottom_data.length > 1" :options="swiperOption" ref="myBotSwiper">
                <!-- slides -->
                <swiper-slide v-for="bot_data in bannerbottom_data">
			    <img :src="bot_data.img_url" alt="bot_banner">
                </swiper-slide>
                <div class="swiper-pagination"  slot="pagination"></div>
                <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div>
            </swiper>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    // 导入相关的包
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'
    import $ from 'jquery'
    // 使用模块
    Vue.use(VueAwesomeSwiper)
    export default {
        name: "index",
        data () {
            return {
                msg: 'index',
                // 配置轮播图的相关参数 使用时绑定到标签里的 options 属性
                swiperOption: {
                    // some swiper options/callbacks
                    // 所有的参数同 swiper 官方 api 参数
                    // 设置分页器
                    pagination: {
                        el: '.swiper-pagination',
                        // 设置点击可切换
                        clickable :true
                    },
                    // 设置前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    // 设置自动轮播
                    autoplay: { 
                        delay: 2000,
                        disableOnInteraction: false,
                    },
                    // 设置轮播可循环
                    loop : true
                },
                banner_data: [
                    {img_url:'http://img.bimg.126.net/photo/ZZ5EGyuUCp9hBPk6_s4Ehg==/5727171351132208489.jpg'},
                    {img_url:'http://img.juimg.com/tuku/yulantu/140218/330598-14021R23A410.jpg'},
                    {img_url:'http://h.hiphotos.baidu.com/lvpics/w=1000/sign=bb4d3e46ecf81a4c2632e8c9e71a6159/77094b36acaf2edd14b2c5db8a1001e939019345.jpg'}
                ],
                bannerbottom_data: [
                    {img_url:'http://img.bimg.126.net/photo/ZZ5EGyuUCp9hBPk6_s4Ehg==/5727171351132208489.jpg'},
                    {img_url:'http://img.juimg.com/tuku/yulantu/140218/330598-14021R23A410.jpg'},
                    {img_url:'http://h.hiphotos.baidu.com/lvpics/w=1000/sign=bb4d3e46ecf81a4c2632e8c9e71a6159/77094b36acaf2edd14b2c5db8a1001e939019345.jpg'}
                ]
            }
        },
        methods: {
	    	//通过获得的swiper对象来暂停自动播放
	    	on_bot_enter() {
                this.myBotSwiper.autoplay.stop()
            },
            on_bot_leave() {
                this.myBotSwiper.autoplay.start()
            },
            on_top_enter() {
                this.mySwiper.autoplay.stop()
            },
            on_top_leave() {
                this.mySwiper.autoplay.start()
            }
        },
		//计算属性，获得可以操作的swiper对象
        computed: {
            mySwiper() {
            	// mySwiper 是要绑定到标签中的ref属性
                return this.$refs.mySwiper.swiper
            },
            myBotSwiper() {
                return this.$refs.myBotSwiper.swiper
            }
        },
        created: function() {
        }
    }
</script>
<style scoped>
    .icontent{
        overflow: hidden;
        width: 100%;
    }
    .my-swiper{
        height: 500px;
    }
    .my-swiper:hover{
        cursor: pointer;
    }
    .my-swiper img{
        height: 100%;
        width: 100%;
    }
</style>