Vue实现图片轮播组件思路及实例解析


Posted in Javascript onMay 11, 2020

1、先看效果:

Vue实现图片轮播组件思路及实例解析

熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播。我认为使用图片轮播。

第一可以给人以一种美观的感受,而不会显得网站那么呆板,

第二可以增加显示内容,同样的区域可以显示更多内容。

 2、每学一个新东西 ,图片轮播都是很好的练手案例,而且,也很实用。

    3、基本要求:页面加载,自动播放。鼠标悬停,停止播放。鼠标离开,继续播放

点击左右箭头切换上一张,下一张图片。

下方小圆点显示当前位第几张图片。

 4、使用Vue实现

 5、示例代码

结构html:

<template>
 <div id="slider">
  <div class="window" @mouseover="stop" @mouseleave="play">
   <ul class="container" :style="containerStyle">
    <li>
     <img :style="{width:imgWidth+'px'}" :src="sliders[sliders.length - 1].img" alt="">
    </li>
    <li v-for="(item, index) in sliders" :key="index">
     <img :style="{width:imgWidth+'px'}" :src="item.img" alt="">
    </li>
    <li>
     <img :style="{width:imgWidth+'px'}" :src="sliders[0].img" alt="">
    </li>
   </ul>
   <ul class="direction">
    <li class="left" @click="move(600, 1, speed)">
     <svg class="icon" width="30px" height="30.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z" /></svg>
    </li>
    <li class="right" @click="move(600, -1, speed)">
     <svg class="icon" width="30px" height="30.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z" /></svg>
    </li>
   </ul>
   <ul class="dots">
    <li v-for="(dot, i) in sliders" :key="i"
    :class="{dotted: i === (currentIndex-1)}"
    @click = jump(i+1)
    >
    </li>
   </ul>
  </div>
 </div>
</template>

CSS部分:

*{
    box-sizing: border-box;
    margin:0;
    padding:0;
   }
   ol,ul{
    list-style: none;
   }
   #slider{
    text-align: center;
   }
   .window{
    position:relative;
    width:600px;
    height:400px;
    margin:0 auto;
    overflow:hidden;
   }
   .container{
    display:flex;
    position:absolute;
   }
   .left, .right{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:50px;
    height:50px;
    background-color:rgba(0,0,0,.3);
    border-radius:50%;
    cursor:pointer;
   }
   .left{
    left:3%;
    padding-left:12px;
    padding-top:10px;
   }
   .right{
    right:3%;
    padding-right:12px;
    padding-top:10px;
   }
   img{
    user-select: none;
   }
   .dots{
     position:absolute;
     bottom:10px;
     left:50%;
     transform:translateX(-50%);
    }
   .dots li{
    display:inline-block;
    width:15px;
    height:15px;
    margin:0 3px;
    border:1px solid white;
    border-radius:50%;
    background-color:#333;
    cursor:pointer;
   }
   .dots .dotted{
    background-color:orange;
   }

JavaScript部分:

script>
export default {
 name: 'slider',
 props: {
  initialSpeed: {
   type: Number,
   default: 30
  },
  initialInterval: {
   type: Number,
   default: 3
  }
 },
 data () {
  return {
   sliders:[
    {
     img:'http://img.hb.aicdn.com/adbde61e4343dedd21e97ea7f22666825a8db7d077ffe-qn8Pjn_fw658'
    },
    {
     img:'http://img.hb.aicdn.com/adeed7d28df6e776c2fa6032579c697381d1a82b7fe00-fwRqgn_fw658'
    },
    {
     img:'http://img.hb.aicdn.com/ab7f48509b3c0353017d9a85ef1d12400c9b2724540d4-p3zouo_fw658'
    },
    {
     img:'http://img.hb.aicdn.com/60f788fc2a846192f224b9e6d4904b30e54926211d3d67-ACFJ9G_fw658'
    },
    {
     img:'http://img.hb.aicdn.com/22ded455284aab361b8d2056e82f74a891a019704296a-PSraEB_fw658'
    },
   ],
   imgWidth:600,
   currentIndex:1,
   distance:-600,
   transitionEnd: true,
   speed: this.initialSpeed
  }
 },
 computed:{
  containerStyle() {
   return {
    transform:`translate3d(${this.distance}px, 0, 0)`
   }
  },
  interval() {
   return this.initialInterval * 1000
  }
 },
 mounted() {
  this.init()
 },
 methods:{
  init() {
   this.play()
   window.onblur = function() { this.stop() }.bind(this)
   window.onfocus = function() { this.play() }.bind(this)
  },
  move(offset, direction, speed) {
   console.log(speed)
   if (!this.transitionEnd) return
   this.transitionEnd = false
   direction === -1 ? this.currentIndex += offset/600 : this.currentIndex -= offset/600
   if (this.currentIndex > 5) this.currentIndex = 1
   if (this.currentIndex < 1) this.currentIndex = 5

   const destination = this.distance + offset * direction
   this.animate(destination, direction, speed)
  },
  animate(des, direc, speed) {
   if (this.temp) {
    window.clearInterval(this.temp);
    this.temp = null ;
   }
   this.temp = window.setInterval(() => {
    if ((direc === -1 && des < this.distance) || (direc === 1 && des > this.distance)) {
     this.distance += speed * direc
    } else {
     this.transitionEnd = true
     window.clearInterval(this.temp)
     this.distance = des
     if (des < -3000) this.distance = -600
     if (des > -600) this.distance = -3000
    }
   }, 20)
  },
  jump(index) {
   const direction = index - this.currentIndex >= 0 ? -1 : 1;
   const offset = Math.abs(index - this.currentIndex) * 600;
   const jumpSpeed = Math.abs(index - this.currentIndex) === 0 ? this.speed : Math.abs(index - this.currentIndex) * this.speed ;
   this.move(offset, direction, jumpSpeed)
  },
  play() {
   if (this.timer) {
    window.clearInterval(this.timer)
    this.timer = null
   }
   this.timer = window.setInterval(() => {
    this.move(600, -1, this.speed)
   }, this.interval)
  },
  stop() {
   window.clearInterval(this.timer)
   this.timer = null
  }
 }
}
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
Confirmer JQuery确认对话框组件
Jun 09 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
ECMAScript6--解构
Mar 30 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
Javascript异步流程控制之串行执行详解
Sep 27 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 #Javascript
只有 20 行的 JavaScript 模板引擎实例详解
May 11 #Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 #Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 #Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 #Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 #Javascript
vue总线机制(bus)知识点详解
May 10 #Javascript
You might like
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
PHP生成器简单实例
2015/05/13 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
Jquery ui css framework
2010/06/28 Javascript
Js四则运算函数代码
2012/07/21 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
个人简历自我鉴定
2013/10/11 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
2014年团队工作总结
2014/11/24 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python