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 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 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
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
php常用表单验证类用法实例
2015/06/18 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
浅谈Node.js 中间件模式
2018/06/12 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
python实现按长宽比缩放图片
2018/06/07 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
Python日志模块logging基本用法分析
2018/08/23 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
查询优化的一般准则有哪些
2015/03/08 面试题
抽象类和接口的区别
2012/09/19 面试题
财务与信息服务专业推荐信
2013/11/28 职场文书
房产销售经理职责
2013/12/20 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
电影圆明园观后感
2015/06/03 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
html5调用摄像头截图功能
2022/01/18 Javascript
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏