利用vueJs实现图片轮播实例代码


Posted in Javascript onJune 03, 2017

最近新学习了vuejs,尝试着用vuejs写了一个简单的图片轮播,便做个简单的记录

以下只贴出carousel.vue代码,其他的省略

<template> 
 <div ref="root">   
  <div class="sliderPanel"> 
   <div v-for="(item,index) in imgArray" class="verticalCenter picbox"> 
    <transition name="slide-fade"> 
      <img :style="{width:width,top:top}" @mouseover="clearAuto" @mouseout="slideAuto" v-show="index===selectIndex" :src="item.url" style="min-height: 100%"> 
    </transition> 
   </div> 
  </div> 
  <div @click="clickLeft" @mouseover="clearAuto" @mouseout="slideAuto" class="arrowLeft verticalCenter horizaCenter"> 
     左移 
  </div> 
  <div @click="clickRight" @mouseover="clearAuto" @mouseout="slideAuto" class="arrowRight verticalCenter horizaCenter"> 
    右移 
  </div> 
  <div class="sliderBar horizaCenter"> 
   <div v-for="(item,index) in imgArray" @mouseover="clearAuto" @mouseout="slideAuto" @click="setIndex(index)" class="circle" :class="{circleSelected:index===selectIndex}"> 
   </div> 
  </div> 
 </div> 
</template> 
<script> 
 const SCREEN_WIDTH=document.body.clientWidth//网页可见区域宽 
 const SCREEN_HEIGHT=document.body.scrollHeight//网页正文全文高 
 var selectIndex=0 
 var timer=null 
 export default { 
  name: "ErCarousel", 
  data() { 
    return { 
         selectIndex:0, 
          width:'100%', 
      height:SCREEN_HEIGHT+'px', 
      top:0, 
      imgArray:[ 
       { 
        url:'/src/components/carousel/image/1.jpg', 
       }, 
       { 
        url:'/src/components/carousel/image/2.jpg', 
       }, 
       { 
        url:'/src/components/carousel/image/3.jpg', 
       } 
      ] 
    } 
  }, 
  methods:{ 
     slideAuto:function () { 
      var that=this; 
    timer=setInterval(function(){  
      that.clickRight();    
   },3000) 
    //clearInterval(timer); 
   }, 
   clearAuto:function(){ 
    clearInterval(timer); 
   }, 
     clickLeft:function(){ 
      if(this.selectIndex==0){ 
        this.selectIndex=this.imgArray.length-1; 
      }else{ 
        this.selectIndex--; 
      } 
      console.log(this.selectIndex); 
      
   }, 
   clickRight:function(){ 
    if(this.selectIndex==this.imgArray.length-1){ 
        this.selectIndex=0; 
      }else{ 
        this.selectIndex++; 
      } 
   }, 
   setIndex:function (index) { 
    this.selectIndex=index; 
   } 
  }, 
  mounted:function(){ 
  this.slideAuto();   
  } 
} 
 
</script> 
<style>

整个模块也是分为了template,script,style三个部分,简单的介绍了图片左右切换,以及css滑动效果等,纯当练手。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript实现Sleep函数的代码
Mar 04 Javascript
jquery中ajax学习笔记3
Oct 16 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
angular中使用Socket.io实例代码
Jun 03 #Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 #jQuery
深入理解Node中的buffer模块
Jun 03 #Javascript
MvcPager分页控件 适用于Bootstrap
Jun 03 #Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 #Javascript
vue 中自定义指令改变data中的值
Jun 02 #Javascript
Jquery EasyUI $.Parser
Jun 02 #jQuery
You might like
一个PHP分页类的代码
2011/05/18 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
物业客服专员岗位职责
2013/11/30 职场文书
社会保险接收函
2014/01/12 职场文书
代办委托书怎样写
2014/04/08 职场文书
项目投资合作意向书
2014/07/29 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
医德医风学习心得体会
2016/01/25 职场文书
初中数学教学反思范文
2016/02/17 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js
MySQL创建管理KEY分区
2022/04/13 MySQL