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 相关文章推荐
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
Vue组件开发初探
Feb 14 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
Vue和React组件之间的传值方式详解
Jan 31 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 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及Zend Engine的线程安全模型分析
2011/11/10 PHP
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
网页中的图片的处理方法与代码
2009/11/26 Javascript
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
使用pymysql查询数据库,把结果保存为列表并获取指定元素下标实例
2020/05/15 Python
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
美国羊皮公司:Overland
2018/01/15 全球购物
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
vue项目实现分页效果
2021/03/24 Vue.js
车间组长岗位职责
2013/12/20 职场文书
教育局长自荐信范文
2013/12/22 职场文书
法语专业求职信
2014/07/20 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
单位综合评价意见
2015/06/05 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL
python Django框架快速入门教程(后台管理)
2021/07/21 Python
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript