vue实现匀速轮播效果


Posted in Javascript onJune 29, 2020

本文实例为大家分享了vue实现匀速轮播效果的具体代码,供大家参考,具体内容如下

vue实现匀速轮播效果

不多描述了 直接代码吧

<template>
 <div>
 <div class="box">
  <ul class="ullist" @mouseleave="clearTimeout" @mouseenter="beginTimeout">
  <li><img src="@/assets/401_images/401.gif" alt="" class="Liwidth"></li>
  <li><img src="@/assets/404_images/404.png" alt=""></li>
  <li><img src="@/assets/401_images/401.gif" alt=""></li>
  <li><img src="@/assets/404_images/404.png" alt=""></li>
  <li><img src="@/assets/401_images/401.gif" alt=""></li>
  <li><img src="@/assets/404_images/404.png" alt=""></li>
  <li><img src="@/assets/401_images/401.gif" alt=""></li>
  <li><img src="@/assets/404_images/404.png" alt=""></li>
  <li><img src="@/assets/401_images/401.gif" alt=""></li>
  </ul>
 </div>
 </div>
</template>
<script>
export default {
 data(){
 return{
  screenWidth:'',
  boxWidth:0,
  isClear:0,
  timer:null,
  left:0,
  timerRun:false,
 }
 },
 methods:{
  //获取窗口的宽度
 getListLeng(){
  this.boxWidth = document.getElementsByClassName('box')[0].offsetWidth
  var ul = document.getElementsByClassName('ullist')[0]
  var length = ul.children.length
  ul.style.width=length*230+'px'
  this.runTimeout(ul,this.boxWidth,length)
 },
 //轮播效果
 runTimeout(ul,boxWidth,length){
  let that = this
  this.timer=setInterval(function(){
  // move();
  
  that.move(ul,boxWidth,length)
  },50) 
 },
 //轮播图走的方法
 move(ul,boxWidth,length){
  var num = this.left--
  var allWidth =length*230-boxWidth
  if(Math.abs(num)>allWidth){
  ul.style.left=0+'px'
  this.left=0
  }
  ul.style.left=num+'px'
 },
 //移入
 beginTimeout(){
  clearInterval(this.timer)
 },
 //移出
 clearTimeout(){
  clearInterval(this.timer)
  this.timer = null
  this.boxWidth = document.getElementsByClassName('box')[0].offsetWidth
  let ul = document.getElementsByClassName('ullist')[0]
  let length = ul.children.length
  ul.style.width=length*230+'px'
  this.runTimeout(ul,this.boxWidth,length)
 } 
 },
 mounted(){
 this.getListLeng()
 window.onresize = () => {
  return (() => {
  this.boxWidth = document.getElementsByClassName('box')[0].offsetWidth
  })()
 },
 getSwiperList().then(res=>{
  this.bannerList = res.data
 })
 },
 //页面销毁的时候 关闭定时器
 destroyed () {
 clearInterval(this.timer)
 }
}
</script>
<style lang="scss" scped>
 .box{
 height:230px;
 width:80%;
 margin: 200px auto;
 position: relative;
 overflow: hidden;
 ul{
  position: absolute;
 }
 li{
  float: left;
  height:230px;
  width:230px;
  img{
  height:230px;
  width:230px;
  }
 }
 }
</style>

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

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

Javascript 相关文章推荐
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
jQuery使用技巧简单汇总
Apr 18 Javascript
js下拉菜单语言选项简单实现
Sep 23 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
ElementUI之Message功能拓展详解
Oct 18 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
Javascript Symbol原理及使用方法解析
Oct 22 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 Javascript
vant实现购物车功能
Jun 29 #Javascript
js实现随机点名器精简版
Jun 29 #Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 #Javascript
在Vue中使用antv的示例代码
Jun 29 #Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 #Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 #Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 #Javascript
You might like
PHP模板引擎SMARTY
2006/10/09 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
PHP类的封装与继承详解
2015/09/29 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
python实现博客文章爬虫示例
2014/02/26 Python
python清除指定目录内所有文件中script的方法
2015/06/30 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
python实现自动化上线脚本的示例
2019/07/01 Python
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
煤矿安全承诺书
2014/05/22 职场文书
迎国庆演讲稿
2014/09/05 职场文书
个人投资合作协议书
2014/10/12 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
四年级小学生评语
2014/12/26 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
跑吧孩子观后感
2015/06/10 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
入党转正申请书范文
2019/05/20 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js