一、普通方式：

其中，index是关键。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <style>
  6. html, body{
  7.     margin: 0;
  8.     padding: 0;
  9. }
  10. .photo-player{
  11.     width: 456px;
  12.     height: 670px;
  13.     overflow: hidden;
  14.     position: relative;
  15. }
  16. .photo-player-lists{
  17.     list-style-type: none;
  18.     margin: 0;
  19.     padding: 0;
  20.     width: 456px;
  21.     height: 670px;
  22. }
  23. .photo-player-lists li{
  24.     list-style-type: none;
  25.     width: 456px;
  26.     height: 670px;
  27. }
  28. .photo-player-lists li img{
  29.     width: 456px;
  30.     height: 670px;
  31. }
  32. .photo-player-button{
  33.     position: absolute;
  34.     margin: 0;
  35.     padding: 0;
  36.     bottom: 30px;
  37.     left: 198px;
  38.     list-style-type: none;
  39. }
  40. .photo-player-button li{
  41.     list-style-type: none;
  42.     width: 10px;
  43.     height: 10px;
  44.     margin-left: 5px;
  45.     margin-right: 5px;
  46.     border-radius: 6px;
  47.     float: left;
  48.     cursor: pointer;
  49. }
  50. .white{
  51.     background: #ffffff;
  52. }
  53. .active{
  54.     background: #0000ff;
  55. }
  56. </style>
  57. <title>Title</title>
  59. </head>
  60. <body>
  61. <div id="app">
  62.     <my-player :photos="photos"></my-player>
  63.     <my-player :photos="photos"></my-player>
  64.     <my-player :photos="photos"></my-player>
  65. </div>
  67. <script src="libs/vue.js"></script>
  68. <script>
  69. Vue.component("my-player", {
  70.     template: `<div class="photo-player">
  71.             <ul class="photo-player-lists">
  72.                 <li v-for="(value, key) in photos" v-if="key==index"><img :src="value" /></li>
  73.             </ul>
  75.             <ul class="photo-player-button">
  76.                 <li v-for="(value, key) in photos" :class="['white', {'active': key == index}]" @click="index = key"></li>
  77.             </ul>
  78.         </div>`,
  79.     props: ["photos"],
  80.     data: function(){
  81.         return {
  82.             index: 0
  83.         }
  84.     },
  85.     methods: {
  86.         change(){
  87.             let that = this;
  88.             let len = this.photos.length;
  89.             setInterval(function(){
  90.                 that.index++;
  91.                 if(that.index == len){
  92.                     that.index = 0;
  93.                 }
  95.             }, 1000*3);
  96.         }
  97.     },
  98.     mounted(){
  99.         this.change();
  100.     }
  101. });
  103. let app = new Vue({
  104.     el: "#app",
  105.     data: {
  106.         photos: ["images/08.jpg", "images/13.jpg", "images/16.jpg"]
  107.     }
  108. });
  109. </script>
  110. </body>
  111. </html>

二、单文件组件形式：

PhotoPlayer.vue：

  1. <template>
  2.     <div class="photo-player">
  3.             <ul class="photo-player-lists">
  4.                 <li v-for="(value, key) in photos" v-if="key==index" :key="key"><img :src="value" /></li>
  5.             </ul>
  7.             <ul class="photo-player-button">
  8.                 <li v-for="(value, key) in photos" :class="['white', {'active': key == index}]" @click="index = key" :key="key"></li>
  9.             </ul>
  10.     </div>
  11. </template>
  13. <script>
  14. export default {
  15.     data(){
  16.         return {
  17.             index: 0
  18.         }
  19.     },
  20.     props: ["photos"],
  21.     methods: {
  22.         change(){
  23.             let that = this;
  24.             let len = this.photos.length;
  25.             setInterval(function(){
  26.                 that.index++;
  27.                 if(that.index == len){
  28.                     that.index = 0;
  29.                 }
  31.             }, 1000*5);
  32.         }
  33.     },
  34.     mounted(){
  35.         this.change();
  36.     }
  37. }
  38. </script>
  40. <style scoped>
  41. html, body{
  42.     margin: 0;
  43.     padding: 0;
  44. }
  45. .photo-player{
  46.     width: 456px;
  47.     height: 670px;
  48.     overflow: hidden;
  49.     position: relative;
  50. }
  51. .photo-player-lists{
  52.     list-style-type: none;
  53.     margin: 0;
  54.     padding: 0;
  55.     width: 456px;
  56.     height: 670px;
  57. }
  58. .photo-player-lists li{
  59.     list-style-type: none;
  60.     width: 456px;
  61.     height: 670px;
  62. }
  63. .photo-player-lists li img{
  64.     width: 456px;
  65.     height: 670px;
  66. }
  67. .photo-player-button{
  68.     position: absolute;
  69.     margin: 0;
  70.     padding: 0;
  71.     bottom: 30px;
  72.     left: 198px;
  73.     list-style-type: none;
  74. }
  75. .photo-player-button li{
  76.     list-style-type: none;
  77.     width: 10px;
  78.     height: 10px;
  79.     margin-left: 5px;
  80.     margin-right: 5px;
  81.     border-radius: 6px;
  82.     float: left;
  83.     cursor: pointer;
  84. }
  85. .white{
  86.     background: #ffffff;
  87. }
  88. .active{
  89.     background: #0000ff;
  90. }
  91. </style>

使用时：

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

  1. <template>
  2.   <div>
  3.     <PhotoPlayer :photos="photos"></PhotoPlayer>
  4.   </div>
  5. </template>
  7. <script>
  8. import PhotoPlayer from './PhotoPlayer'
  9. export default {
  10.   data() {
  11.     return {
  12.       photos: [require("../assets/08.jpg"), require("../assets/13.jpg"), require("../assets/16.jpg")]
  13.     }
  14.   },
  15.   components: {
  16.     PhotoPlayer
  17.   }
  18. };
  19. </script>
  21. <style scoped=""></style>

注意：

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

解决办法：

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

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

渲染的时候要写：

  1. <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. Java MyBatis逆向工程,自动生成pojo,mapper

    生成xml文件,文件名generator.xml <?xml version="1.0" encoding="UTF-8"?><!DOCTYP ...

  2. HDU1285（拓扑排序裸题

    ..被多组测试坑了一波 #include<iostream> #include<vector> #include<queue> using namespace st ...

  3. GridFS文件操作

    目录 1. GridFS介绍 2. GridFS 存取文件测试 2.1 新建项目配置pom.xml 2.2 在application.yml配置mongodb 2.3 GridFS存取文件测试 2.4 ...

  4. c# mvc权限系统

    登陆界面可以用index1,现在这个是仿照这个写的 登陆后的界面.模板都是套的,数据那个easyui自己写的 后台直接三层架构,dapper连处理数据后面加了autofac demo地址:https: ...

  5. jvm自带的监控机制

    Jdk为我们提供了查看java服务运行时的监控情况 1.如下图所示,打开指定目录下的jconsole.exe应用程序文件. 2.双击后跳出如下界面,可以看到,我们可以监视本地的,也可以监视远程服务.本 ...

  6. vue访问本地文件404

    用了vue cli3.0用axios调用本地json数据一直报404,找了半天郁闷,最后发现原因是,vue cli3.0 public 文件夹才是静态资源文件,问题解决,记录一下,以后不再踩坑.

  7. 根据返回数据, 迭代数组, 构造HTML结构

    首先需要引入jQuery哈! 1. 要求用下面的格式制作目录, 结构如下: <ul> <li>xxxx</li> <li>xxxx</li> ...

  8. go语言入门（1）

    1,Go语言的核心开发团队-三个大牛 Ken Thompson(肯·汤普森):1983年图灵奖(Turing Award)和1998年美国国家技术奖(National Medal of Technol ...

  9. docker一键搭建Nginx+PHP环境(含自动部署命令)

    文章的主要部分是一步一步的教程,文章的最后是我整理好的一键安装命令,自动下载并安装docker,构建镜像,启动容器集群(压缩包内注释覆盖范围达到80%) 大家可以看完教程亲自尝试下,也可以直接执行一键 ...

  10. DataGrip导出查询结果数据

    1 按钮 2 选择保存位置即可