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编程起步(第七课)
Jan 10 Javascript
实现变速回到顶部的JavaScript代码
May 09 Javascript
js实现的map方法示例代码
Jan 13 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
关于JavaScript轮播图的实现
Nov 20 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 程序授权验证开发思路
2009/07/09 PHP
php中使用redis队列操作实例代码
2013/02/07 PHP
PHP加密解密类实例代码
2016/07/20 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
微信jssdk用法汇总
2016/07/16 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
倡导文明标语
2014/06/16 职场文书
大学生心理活动总结
2014/07/04 职场文书
2014教师年度工作总结
2014/11/10 职场文书
致运动员加油稿
2015/07/21 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
python调试工具Birdseye的使用教程
2021/05/25 Python
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers