利用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 快捷键设置实现代码
Mar 13 Javascript
Javascript计算时间差的函数分享
Jul 04 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
es6数值的扩展方法
Mar 11 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
vue中监听路由参数的变化及方法
Dec 06 Javascript
node crawler如何添加promise支持
Feb 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文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
PHP文件读写操作之文件写入代码
2011/01/13 PHP
PHP imagecreatefrombmp 从BMP文件或URL新建一图像
2012/07/16 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
Nginx实现反向代理
2017/09/20 Servers
php中yar框架实例用法讲解
2020/12/27 PHP
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
Python之PyUnit单元测试实例
2014/10/11 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
Python实现一个论文下载器的过程
2021/01/18 Python
季度思想汇报
2014/01/01 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
担保书范文
2019/07/09 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python
JavaScript的Set数据结构详解
2022/02/18 Javascript
关于Python使用turtle库画任意图的问题
2022/04/01 Python