利用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 DOM 学习第五章 表单简介
Feb 19 Javascript
jQuery操作select的实例代码
Jun 14 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
vue实现图片上传功能
May 28 Javascript
如何在selenium中使用js实现定位
Aug 18 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 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 获取完整url地址
2008/12/20 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
php简单smarty入门程序实例
2015/06/11 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
jQuery each()方法的使用方法
2010/03/18 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
python多线程抓取天涯帖子内容示例
2014/04/03 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
用Python解决x的n次方问题
2019/02/08 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
基于Django框架的权限组件rbac实例讲解
2019/08/31 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
高考考python编程是真的吗
2020/07/20 Python
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
Linux面试题LINUX系统类
2015/11/25 面试题
幼儿园运动会入场词
2014/02/10 职场文书
优良学风班申请材料
2014/02/13 职场文书
护理中职生求职信范文
2014/02/24 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
初中班主任教育随笔
2015/08/15 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书