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 相关文章推荐
javascript实现 在光标处插入指定内容
May 25 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
Bootstrap选项卡动态切换效果
Nov 28 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
原生JS实现无缝轮播图片
Jun 24 Javascript
vue el-upload上传文件的示例代码
Dec 21 Vue.js
浅谈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 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
Codeigniter发送邮件的方法
2015/03/19 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
EJB3.1都有哪些改进
2012/11/17 面试题
毕业生个人求职的自我评价
2013/10/28 职场文书
国际会议邀请函范文
2014/01/16 职场文书
收银出纳员岗位职责
2014/02/23 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
银行求职信范文
2014/05/26 职场文书
校园文明标语
2014/06/13 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
涨价通知怎么写
2015/04/23 职场文书
民事起诉状范文
2015/05/19 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python
Java存储没有重复元素的数组
2022/04/29 Java/Android