一、普通方式：

其中，index是关键。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<style>

html, body{

    margin: 0;

    padding: 0;

}

.photo-player{

    width: 456px;

    height: 670px;

    overflow: hidden;

    position: relative;

}

.photo-player-lists{

    list-style-type: none;

    margin: 0;

    padding: 0;

    width: 456px;

    height: 670px;

}

.photo-player-lists li{

    list-style-type: none;

    width: 456px;

    height: 670px;

}

.photo-player-lists li img{

    width: 456px;

    height: 670px;

}

.photo-player-button{

    position: absolute;

    margin: 0;

    padding: 0;

    bottom: 30px;

    left: 198px;

    list-style-type: none;

}

.photo-player-button li{

    list-style-type: none;

    width: 10px;

    height: 10px;

    margin-left: 5px;

    margin-right: 5px;

    border-radius: 6px;

    float: left;

    cursor: pointer;

}

.white{

    background: #ffffff;

}

.active{

    background: #0000ff;

}

</style>

<title>Title</title>

</head>

<body>

<div id="app">

    <my-player :photos="photos"></my-player>

    <my-player :photos="photos"></my-player>

    <my-player :photos="photos"></my-player>

</div>

<script src="libs/vue.js"></script>

<script>

Vue.component("my-player", {

    template: `<div class="photo-player">

            <ul class="photo-player-lists">

                <li v-for="(value, key) in photos" v-if="key==index"><img :src="value" /></li>

            </ul>

            <ul class="photo-player-button">

                <li v-for="(value, key) in photos" :class="['white', {'active': key == index}]" @click="index = key"></li>

            </ul>

        </div>`,

    props: ["photos"],

    data: function(){

        return {

            index: 0

        }

    },

    methods: {

        change(){

            let that = this;

            let len = this.photos.length;

            setInterval(function(){

                that.index++;

                if(that.index == len){

                    that.index = 0;

                }

            }, 1000*3);

        }

    },

    mounted(){

        this.change();

    }

});

let app = new Vue({

    el: "#app",

    data: {

        photos: ["images/08.jpg", "images/13.jpg", "images/16.jpg"]

    }

});

</script>

</body>

</html>

二、单文件组件形式：

PhotoPlayer.vue：

<template>

    <div class="photo-player">

            <ul class="photo-player-lists">

                <li v-for="(value, key) in photos" v-if="key==index" :key="key"><img :src="value" /></li>

            </ul>

            <ul class="photo-player-button">

                <li v-for="(value, key) in photos" :class="['white', {'active': key == index}]" @click="index = key" :key="key"></li>

            </ul>

    </div>

</template>

<script>

export default {

    data(){

        return {

            index: 0

        }

    },

    props: ["photos"],

    methods: {

        change(){

            let that = this;

            let len = this.photos.length;

            setInterval(function(){

                that.index++;

                if(that.index == len){

                    that.index = 0;

                }

            }, 1000*5);

        }

    },

    mounted(){

        this.change();

    }

}

</script>

<style scoped>

html, body{

    margin: 0;

    padding: 0;

}

.photo-player{

    width: 456px;

    height: 670px;

    overflow: hidden;

    position: relative;

}

.photo-player-lists{

    list-style-type: none;

    margin: 0;

    padding: 0;

    width: 456px;

    height: 670px;

}

.photo-player-lists li{

    list-style-type: none;

    width: 456px;

    height: 670px;

}

.photo-player-lists li img{

    width: 456px;

    height: 670px;

}

.photo-player-button{

    position: absolute;

    margin: 0;

    padding: 0;

    bottom: 30px;

    left: 198px;

    list-style-type: none;

}

.photo-player-button li{

    list-style-type: none;

    width: 10px;

    height: 10px;

    margin-left: 5px;

    margin-right: 5px;

    border-radius: 6px;

    float: left;

    cursor: pointer;

}

.white{

    background: #ffffff;

}

.active{

    background: #0000ff;

}

</style>

使用时：

在某个单文件组件中引用PhotoPlayer.vue

<template>

  <div>

    <PhotoPlayer :photos="photos"></PhotoPlayer>

  </div>

</template>

<script>

import PhotoPlayer from './PhotoPlayer'

export default {

  data() {

    return {

      photos: [require("../assets/08.jpg"), require("../assets/13.jpg"), require("../assets/16.jpg")]

    }

  },

  components: {

    PhotoPlayer

  }

};

</script>

<style scoped=""></style>

注意：

定义了一个数组，数组里面装有图片的路径，使用for循环渲染页面时，图片路径对但是图片不显示。

解决办法：

数组里面图片的路径要写成如下：

image:require('../assets/login.png')

渲染的时候要写：

<img :src="item.image" />

vue实例之组件开发：图片轮播组件的更多相关文章

  1. 循序渐进BootstrapVue，开发公司门户网站（4）--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示

    在BootstrapVue组件库里面,提供了很多对Bootstrap同等类似的组件封装,其中图片轮播可以采用b-carousel-slide组件实现,而有一些小的图片,如客户/合作伙伴Logo或者友情 ...

  2. Vue学习—Vue写一个图片轮播组件

    1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内 ...

  3. 用Vue实现一个简单的图片轮播

    本文已收录至https://github.com/likekk/studyBlog欢迎大家star,共同学习,共同进步.如果文章有错误的地方,欢迎大家指出.后期将在将GitHub上规划前端学习的路线和 ...

  4. 一分钟搞定AlloyTouch图片轮播组件

    轮播图也涉及到触摸和触摸反馈,同时,AlloyTouch可以把惯性运动打开或者关闭,并且设置min和max为运动区域,超出会自动回弹. 除了一般的竖向滚动,AlloyTouch也可以支持横向滚动,甚至 ...

  5. Angular2组件与指令的小实践——实现一个图片轮播组件

    如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...

  6. Omi-touch实战 移动端图片轮播组件的封装

    pc端的轮播,移动端的轮播都很常见.一年前,我还为手机端没有左滑,右滑事件从而封装了一个swipe库,可以自定义超过多少滑动时间就不触发,也可以设置滑动多少距离才触发,这一个功能的代码就达到400多行 ...

  7. 如何将angular-ui的图片轮播组件封装成一个指令

    在项目开发中我们经常会遇到图片轮播的功能点: 如果我们开发人员自己原生手写,将会花费很多的时间,最终得不偿失. 接下来就详细说说如何使用angular-ui发热图片轮播模块,并且将它写成一个指令(便于 ...

  8. 如何将angular-ui-bootstrap的图片轮播组件封装成一个指令

    在项目开发中我们经常会遇到图片轮播的功能点: 如果我们开发人员自己原生手写,将会花费很多的时间,最终得不偿失. 接下来就详细说说如何使用angular-ui发热图片轮播模块,并且将它写成一个指令(便于 ...

  9. iOS开发--图片轮播

    直接上代码了,比较简单.演示下载地址:Demo // // UYViewController.m // 图片轮播器 // // Created by jiangys on 15/5/23. // Co ...

  10. ios开发图片轮播器以及定时器小问题

    一:图片轮播器效果如图:能实现自动轮播,到最后一页时,轮播回来,可以实现拖拽滚动 二:代码: #import "ViewController.h" ; @interface Vie ...

随机推荐

  1. 骨牌摆放方案数n*m（状压DP）

    题意:https://www.nitacm.com/problem_show.php?pid=1378 如题. 思路: 从第一行for到最后一行,枚举每一行的所有状态,进行转移,注意答案是dp[最后一 ...

  2. django进阶版3

    hello... cookie与session 为什么会有cookie和session? 由于http协议是无状态的 无法记住用户是谁 cookie cookie是保存在客户端浏览器上的键值对 是服务 ...

  3. 流程控制之 for 循环

    目录 流程控制之for循环 for 循环条件语句 for 循环的嵌套 流程控制之for循环 for 循环条件语句 for i in range(3): print(i) # 0 # 1 # 2 for ...

  4. python病毒

    介绍 今天碰到一个有趣的python病毒,在这里https://github.com/cranklin/Python-Virus/blob/master/pythonvirus.py#L37 源码 分 ...

  5. C - 简易贪吃蛇的编写

    不多废话,直接进入正题——用C编写简易贪吃蛇.附上拙劣的源码 * c-snake * 首先说明使画面动起来的原理:通过 system("cls"); 清除当前控制台的显示,再pri ...

  6. FTP-实例(Md5验证)

    import socket, os, hashlib server = socket.socket() server.bind(("localhost", 9999)) serve ...

  7. 搭建自己的框架WedeNet（三）

    WedeNet2018.BussinessLogic-业务逻辑层:结构如下: 基类: using System; using System.Collections.Generic; using Sys ...

  8. linq to xml运用示例

    代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; using Syste ...

  9. MFC六大核心机制

    MFC六大核心机制概述 我们选择了C++,主要是因为它够艺术.够自由,使用它我们可以实现各种想法,而MFC将多种可灵活使用的功能封装起来,我们岂能忍受这种“黑盒”操作?于是研究分析MFC的核心机制成为 ...

  10. 如何使用Jedis操作redis

    public class JredisTest { private static Jedis jedis = new Jedis("localhost", 6379); publi ...