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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
js数组的基本操作(很全自己整理的)
Oct 16 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
理解javascript async的用法
Aug 22 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 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
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
强烈推荐:php.ini中文版(2)
2006/10/09 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
如何实现JS函数的重载
2006/09/22 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
在Django框架中运行Python应用全攻略
2015/07/17 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
python实现简单五子棋游戏
2019/06/18 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
python如何将多个PDF进行合并
2019/08/13 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
python实现图像外边界跟踪操作
2020/07/13 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
创联软件面试题笔试题
2012/10/07 面试题
初中生考试作弊检讨书
2014/12/14 职场文书
讲座通知范文
2015/04/23 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书