利用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字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 Javascript
Ajax实现异步加载数据
Nov 17 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
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
与Math.pow 相反的函数使用介绍
2014/08/04 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
Python中的两个内置模块介绍
2015/04/05 Python
python实现的文件同步服务器实例
2015/06/02 Python
Python实现控制台进度条功能
2016/01/04 Python
Python unittest单元测试框架总结
2018/09/08 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
Python读取stdin方法实例
2019/05/24 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
Python中Unittest框架的具体使用
2019/08/27 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
彻底解决Python包下载慢问题
2020/11/15 Python
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
茶叶生产计划书
2014/01/10 职场文书
先进事迹报告会感言
2014/01/24 职场文书
小学音乐教学反思
2014/02/05 职场文书
幼教求职信
2014/03/12 职场文书
总经理人事任命书
2014/06/05 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
2015年超市工作总结
2015/04/09 职场文书
个人求职意向书
2015/05/11 职场文书
python flappy bird小游戏分步实现流程
2022/02/15 Python