简单修改了下你的代码,点击不会暂停了

  • v-for="item in ['http://e.hiphotos.baidu.com/image/h%3D300/sign=a9e671b9a551f3dedcb2bf64a4eff0ec/4610b912c8fcc3cef70d70409845d688d53f20f7.jpg','http://a.hiphotos.baidu.com/image/h%3D300/sign=a62e824376d98d1069d40a31113eb807/838ba61ea8d3fd1fc9c7b6853a4e251f94ca5f46.jpg','http://f.hiphotos.baidu.com/image/h%3D300/sign=0c78105b888ba61ec0eece2f713597cc/0e2442a7d933c8956c0e8eeadb1373f08202002a.jpg']"

    >

import BScroll from 'better-scroll'

export default {

name: 'home',

created() {

for (let i = 0; i < 100; i++) {

this.data[i] = i

}

},

mounted() {

this.$nextTick(() => {

this.setSlideWidth()

this.initSlide()

this._play()

})

},

data() {

return {

data: [],

scroll: null,

timer: null,

dots: [1, 2, 3],

currentIndex: 0

}

},

methods: {

// 设置容器宽度

setSlideWidth() {

let slideWidth = 0

let children = this.$refs.ul.children

for (let i = 0; i < children.length; i++) {

children[i].style.width = this.$refs.slide.clientWidth + 'px'

slideWidth += children[i].offsetWidth

}

this.$refs.ul.style.width = slideWidth + this.$refs.slide.clientWidth * 2 + 'px'

},

// 初始化slide

initSlide() {

this.slide = new BScroll(this.$refs.slide, {

scrollX: true,

scrollY: false,

momentum: false,

snap: {

loop: this.loop || true,

threshold: this.threshold || 0.3,

speed: this.speed || 400

},

bounce: false,

stopPropagation: true,

click: this.click || true

})

this.slide.on('scrollEnd', this._onScrollEnd)

this.slide.on('touchEnd', () => {

// if (this.autoPlay) {

this._play()

// }

})

this.slide.on('beforeScrollStart', () => {

// if (this.autoPlay) {

clearTimeout(this.timer)

// }

})

},

// 滚动到下一页

_play() {

clearTimeout(this.timer)

this.timer = setTimeout(() => {

this.slide.next()

}, 400)

},

_onScrollEnd() {

let pageIndex = this.slide.getCurrentPage().pageX

this.currentIndex = pageIndex

// if (this.autoPlay) {

this._play()

// }

}

}

}

.slide {

width: 100%;

// max-width: 6.4rem;

overflow: hidden;

position: relative;

ul {

list-style-type: none;

position: relative;

overflow: hidden;

li {

float: left;

img {

width: 100%;

}

}

}

.dot {

position: absolute;

text-align: center;

width: 100%;

top: 80%;

span {

display: inline-block;

width: 4px;

height: 4px;

background-color: #fff;

border-radius: 100%;

margin: 0 6px 0 0;

}

span.active {

background-color: red;

width: 14px;

border-radius: 4px;

}

}

}

.list-wrapper {

position: relative;

max-height: 3.5rem;

overflow: hidden;

li {

height: 0.5rem;

line-height: 0.5rem;

}

}

如果你想使用better-scroll封装slide等组件建议你先查看demo

Tips:better-scroll推出了2.x demo 是基于1.x的,2.x版本中各种组件上层使用更简洁,你应该使用的是1.x版本

html轮播图鼠标可以暂停,为什么better scroll轮播鼠标点击就会暂停?相关推荐

  1. JS来实现轮播图(走马灯)可左右切换图片,鼠标移入会停止轮播

    效果一: 会自动进行轮播,当鼠标进入轮播图区域会停止轮播,点击左右箭头可以向前.向后进行切换图片 效果二: 这种效果比第一种效果简单,只要删除一些代码和修改一些样式即可. 实现原理 轮播图整体是放在u ...

  2. 响应式html轮播图,最简单的响应式jQuery轮播图插件

    easySlider.js是一款轻量级.简单易用的响应式jQuery轮播图插件.easySlider.js可以根据视口的大小来动态修改轮播图的尺寸.它压缩后的版本仅5K大小,简单实用. 使用方法 在页 ...

  3. php实现轮播图代码,微信小程序实例:轮播图的代码实现与分析

    本篇文章给大家带来的内容是关于微信小程序实例:轮播图的代码实现与分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本文来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播. S ...

  4. js实现轮播图_高性能轻量级零依赖的轮播图组件——Glider.js

    介绍 Glider.js是一个依赖原生js的轮播图组件库,因为其压缩后仅仅2.8k大小,其拥有着很好的性能,Glider.js在Github上开源,目前已拥有2.4kstars. Github htt ...

  5. html轮播图原理,30_用js实现一个轮播图效果,简单说下原理

    一.原理 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局 如下所示: 轮播图 1 2 3 4 5 < > 只有五张图片,却使用7张来轮播,这 ...

  6. 轮播图:小米官网同款轮播图,拿走它让你的网页酷酷的~

    下面是我闲暇时总结的JS.CSS.算法总结,欢迎大家点赞.star-- 有趣实用的CSS效果 前端博客 传送门 LeetCode个人题解 传送门 最近一直再看基础知识,打算将基础知识与实力结合起来,第 ...

  7. JS完成轮播图(全部JS代码,自动轮播)

    需求: 1.点击左右方向图标切换图片 2.点击图片中的小圆点切换对应图片 3.切换图片改变对应小圆点的颜色 4.鼠标离开时自动轮播,鼠标滑入停止轮播 5.不能有空白 思路: 1.先布局,创建轮播图显示 ...

  8. js轮播图代码_javascript基础(一)——轮播图

    javascript基础(一)--轮播图 1.轮播图的实现原理 轮播图的js实现原理其实十分的简单,首先将图片放入一个ul标签中,ul标签的大小要足够将所有图片放入其中.然后再将ul标签放进div中, ...

  9. layui轮播图切换会有跳动_Layui中轮播图切换函数说明

    ### Layui中轮播图切换函数说明 ### ##### 官方文档 [链接][Link 1] ##### ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdG ...

  10. 【Web前端】【疑难杂症】轮播图图片自适应显示问题(bootstrap3轮播图)

    关键代码 html <!-- 轮播图开始--><div id="header" class="carousel slide"><! ...

最新文章

  1. js 回车触发点击事件
  2. SpringBoot+MyBatisPlus实现前端传递时间查询条件ajax请求后台并回显数据流程整理
  3. 打印多项式的那些坑(洛谷P1067题题解,Java语言描述)
  4. OSTimeGet()--获取当前时间
  5. Java基础:请求重定向与请求转发的比较
  6. 李彦宏发布人生第一条Vlog,发力视频从自己做起
  7. 关于bash中if语法结构的广泛误解(转)
  8. 【转载】推荐系统的十大挑战
  9. NG-ZORRO 7.3.0 发布,Ant Design 的 Angular 实现
  10. Daily Report 2012.11.06 刘宇翔
  11. java转换ppt,ppt转成图片 乱码问题解决
  12. Cloudera Manager 安装 CDH5.x 心得
  13. 怎么样向云服务器上传文件_怎样把文件上传到云服务器
  14. 最简单的STM32入门教程----闪烁LED
  15. xp怎样修改计算机mac地址,WinXP系统MAC地址修改的方法
  16. Java实现读取txt文件数据并导入数据库
  17. 一个人被提拔,不仅仅是能力,而是信任
  18. adb shell appops(系统服务:appops)
  19. android 逆向ida,浅谈安卓逆向协议(四)- ida pro - 小红书
  20. 求求你,商用项目不要再使用jsdelivr的CDN服务了

热门文章

  1. Oracle的登陆问题和初级学习增删改查(省略安装和卸载)
  2. unity3d--为组件添加声音
  3. hadoop中MapReduce中压缩的使用及4种压缩格式的特征的比较
  4. POJ 3463 Sightseeing(次短路问题)
  5. 【转】用VB操作Excel详解
  6. ThreadLocal类
  7. 因修改/etc/sudoers权限导致sudo和su不能使用的解决方法
  8. 【Linux】解决Linux服务器内存不足问题
  9. 解决ubuntu上ifconfig没有eth0/ens33且无法上网的问题
  10. GIS项目中数据开源、工具开源、开发开源的解决方案