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 相关文章推荐
JavaScript 字符串连接性能优化
Dec 20 Javascript
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
微信小程序 教程之事件
Oct 18 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
jquery replace方法去空格
May 08 jQuery
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
JS实现网站吸顶条
Jan 08 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
对Session和Cookie的区分与解释
2007/03/16 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
PHP children()函数讲解
2019/02/03 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
javascript getElementsByName()的用法说明
2009/07/31 Javascript
jquery 常用操作方法
2010/01/28 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
python编写暴力破解FTP密码小工具
2014/11/19 Python
Python计算回文数的方法
2015/03/11 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
python占位符输入方式实例
2019/05/27 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
python递归函数用法详解
2020/10/26 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
中学教师暑期培训方案
2014/08/27 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫