利用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 相关文章推荐
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
JavaScript 开发规范要求(图文并茂)
Jun 11 Javascript
javascript正则表达式中参数g(全局)的作用
Nov 11 Javascript
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
详解angularJs指令的3种绑定策略
Apr 13 Javascript
Angular4 中常用的指令入门总结
Jun 12 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 Javascript
Vue常用API、高级API的相关总结
Feb 02 Vue.js
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支持页面回退的两种方法
2008/01/10 PHP
网站用php实现paypal整合方法
2010/11/28 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
jquery蒙版控件实现代码
2010/12/08 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
浅述python中argsort()函数的实例用法
2017/03/30 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
python中取绝对值简单方法总结
2020/07/24 Python
Python页面加载的等待方式总结
2021/02/28 Python
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
产品工艺师的岗位职责
2013/11/15 职场文书
小加工厂管理制度
2014/01/21 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
体育教师个人工作总结
2015/02/09 职场文书
党员干部廉政承诺书
2015/04/28 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
Oracle 触发器trigger使用案例
2022/02/24 Oracle
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript