文档章节

Vue轮播图片

 冰shang蚊
发布于 2017/07/28 09:59
字数 353
阅读 71
收藏 3
Vue

一般做图片轮播效果,通常我们直接下载jQuery轮播组件,然后进行相对应的配置,修改样式,则达到我们想要的结果。

然后Vue里面的轮播效果相对js中实现更加简洁,不需要过多的代码,也不需要导入轮播核心库。

当然咯也需要先安装一个组件:better-scroll;然后在对应文件中导入:import BScroll from 'better-scroll'

直接上代码:

html代码

<div class="content-wapper">
<!-- 这里使用的是Vue渐进效果的图片切换 -->
      <transition-group tag="ul" class="transition-ul" name="list">
        <li v-for="(movie,index) in movies" class="movie-item" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go" >
          <img :src="movie.poster" class="img-responsive">
        </li>
      </transition-group>
<!-- 迭代出图片的格式并绑定事件进行图片间切换 -->
      <div class="carousel-items">
        <span v-for="(item,index) in movies.length" :class="{'active':index===currentIndex}" @mouseover="change(index)"></span>
      </div>
    </div>

js代码

import BScroll from 'better-scroll'  //  导入better-scroll 组件
  export default {
    data(){
      return {
        currentIndex: 0,// 当前切换图片的标识
        timer: '', // 显示时间
        movies:[{
          name:"格兰",
          poster:"http://fastwebcache.yod.cn/youvideos/movie_image/1463542492912.jpg"
        },{
          name:"终结者",
          poster:"http://fastwebcache.yod.cn/youvideos/movie_image/1463392541095.jpg"
        },{
          name:"铁甲钢拳",
          poster:"http://fastwebcache.yod.cn/youvideos/movie_image/1463543262343.jpg"
        }]
      }
  },cearted(){
   // Vue创建过程中 通过 nextTick接口回调进行图片自动播放
    this.$nextTick(() => {
      this.timer = setInterval(() => {
        this.autoPlay()
      },4000)
    })
  },methods:{
   // 鼠标移动 图片切换 
    go() {
      this.timer = setInterval(() => {
        this.autoPlay()
      },4000)
    },
    stop() { // 停止切换
      clearInterval(this.timer)
      this.timer = null
    },
    change(index) { // 记录当前选择的图片
      this.currentIndex = index
    },
    autoPlay() { // 
      this.currentIndex++
      if (this.currentIndex > this.movies.length - 1) {
        this.currentIndex = 0
      }
    }
  }

 

© 著作权归作者所有

下一篇: Css 3d轮播样式
粉丝 1
博文 43
码字总数 29244
作品 0
海淀
私信 提问
8.轮播图组件及vue-awesome-swiper的引入(手把手教你用vue+node+mongodb搭建一个小商城)

GitHub:https://github.com/Ewall1106/mall 一、新建home.vue 1、上篇我们为了便于展示,把头部组件放在了页面,现在我们删掉里面的头部组件然后我们在view文件里面新建一个页面,然后把头部...

Ewall_
2018/05/30
0
0
27、有赞Vant组件库的引入及轮播图片预览的实现②

前言:上一章主要是安装并引入了vant组件库;这章我们完成商品详情页轮播图片的预览功能。其实图片预览功能自己写也很简单,我可能比较懒。。。 Github:https://github.com/Ewall1106/mall...

Ewall_
2018/09/10
0
0
vue中引用swiper轮播插件

有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理。 申明:本文所使用的是vue.2x版本。 通过npm安装插件: npm install ...

邹琼俊
2018/08/16
0
0
当大多数人对Vue理解到炉火纯青的时候,是不是该思考一下怎么让vue页面骚气起来

写在前面 当大多数人Vue理解的炉火纯青的时候,你应该思考怎么让vue页面骚气起来,下面就我个人在接触Vue两年的时间里,在实际工作中门户网站在前端页面交互应用和技巧,炒几道“小菜”给大家...

codercao
2018/08/16
0
0
当大多数人对Vue理解到炉火纯青的时候,你应该思考怎么让vue页面骚气起来

写在前面 当大多数人Vue理解的炉火纯青的时候,你应该思考怎么让vue页面骚气起来,下面就我个人在接触Vue两年的时间里,在实际工作中门户网站在前端页面交互应用和技巧,炒几道“小菜”给大家...

codercao
2018/08/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

解决vim打开之后乱码的问题

在Windows中的文档,传输到Linux系统中(使用rz命令),出现乱码 root@localhost ~]# rpm -qf `which iconv` glibc-common-2.17-105.el7.x86_64 [root@localhost ~]# rpm -ihv /mnt/Packages......

寰宇01
22分钟前
0
0
aldi 2017年1月记录

../../tools/CBLAS/lib/cblas_LINUX.a ../../tools/lapack-3.4.2/liblapacke.a \../../tools/lapack-3.4.2/librefblas.a -lgfortran \../../tools/lapack-3.4.2/liblapack.a \../../......

MtrS
23分钟前
0
0
Choerodon如何进行日志收集与告警

作者:董文启 应用程序日志是由软件应用程序记录的事件文件, 它一般包含错误,信息事件和警告。一个良好的日志系统有助于快速发现问题,定位问题,同时也为业务分析起到一定的作用。 传统E...

Choerodon
35分钟前
1
0
js二维码生成插件“jquery.qrcode.min.js”

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>生成二维码</title> <script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></scri......

泉天下
38分钟前
0
0
Spring AOP之同一个对象方法内部自调用导致事务失效问题

对于像我这种喜欢滥用AOP的程序员,遇到坑也是习惯了,不仅仅是事务,其实只要脱离了Spring容器管理的所有对象,对于SpringAOP的注解都会失效,因为他们不是Spring容器的代理类,SpringAOP,就切入不...

xiaomin0322
44分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部