利用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 相关文章推荐
索趣科技的答案
Feb 07 Javascript
JavaScript 事件属性绑定带参数的函数
Mar 13 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
javascript实现连续赋值
Aug 10 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 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初学者头疼问题总结
2006/07/08 PHP
推荐个功能齐全的发送PHP邮件类
2007/01/03 PHP
一个自定义位数的php多用户计数器代码
2007/03/11 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
php取出数组单个值的方法
2018/03/12 PHP
php设计模式之迭代器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
Python中的上下文管理器和with语句的使用
2018/04/17 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
C语言50道问题
2014/10/23 面试题
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
欢迎新生标语2015
2015/07/16 职场文书
终止合同协议书范本
2016/03/22 职场文书
同学联谊会邀请函
2019/06/24 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python