swiper3 无缝滚动 + 鼠标悬停停止/继续

news2024/10/5 19:10:11

html结构:

<div class="peopleSwiper">
 <div class="swiper-container">
   <div class="swiper-wrapper">
     <div class="swiper-slide"><img src="images/people01.png"></div>
     <div class="swiper-slide"><img src="images/people02.png"></div>
     <div class="swiper-slide"><img src="images/people03.png"></div>
     <div class="swiper-slide"><img src="images/people04.png"></div>
     <div class="swiper-slide"><img src="images/people01.png"></div>
     <div class="swiper-slide"><img src="images/people02.png"></div>
     <div class="swiper-slide"><img src="images/people03.png"></div>
     <div class="swiper-slide"><img src="images/people04.png"></div>
     <div class="swiper-slide"><img src="images/people01.png"></div>
     <div class="swiper-slide"><img src="images/people02.png"></div>
     <div class="swiper-slide"><img src="images/people03.png"></div>
     <div class="swiper-slide"><img src="images/people04.png"></div>
  </div>
 </div>
</div>

 

无缝滚动(修改css和autoplay属性)

.swiper-container-free-mode > .swiper-wrapper{transition-timing-function:linear;}
//初始化一个Swiper为peopleSwiper
var peopleSwiper = new Swiper('.peopleSwiper .swiper-container', {
  slidesPerView: 8,
  paginationClickable: true,
  spaceBetween: 5,
  autoplay: true, //autoplay设置为true或者1
  speed: 1000,
  disableOnInteraction: true,
  loop:true,
  freeMode: true
});

 

鼠标悬停控制

mySwiper.stopAutoplay() 和 mySwiper.startAutoplay()是控制autoplay属性,无缝滚动是speed属性,mySwiper.stopAutoplay() 和 mySwiper.startAutoplay()可以实现鼠标悬停暂停和继续的效果,但是需swiper执行完speed规定值后再执行暂停,如果需要鼠标悬停立刻暂停,移开后继续需调整mySwiper.stopAutoplay() 和 mySwiper.startAutoplay()控制

swiper3 官方

//鼠标覆盖停止自动切换
mySwiper.container[0].onmouseover=function(){
  mySwiper.stopAutoplay();
}
//鼠标移出开始自动切换
mySwiper.container[0].onmouseout=function(){
  mySwiper.startAutoplay();
}

/*
或者
mouseenter / mouseleave 和 hover
".peopleSwiper"为html外层类名 peopleSwiper为初始化swiper名
*/
$('.peopleSwiper').mouseenter(function() {
  peopleSwiper.stopAutoplay();
}).mouseleave(function() {
  peopleSwiper.startAutoplay();
})

$('.peopleSwiper').hover(function() {
  peopleSwiper.stopAutoplay();
},function(){
  peopleSwiper.startAutoplay();
})

mouseenter / mouseleave 或者 hover

let speedNum = 3000 //swiper滑动速度
let slideViewNum = 8 //swiper容器能够同时显示的slides数量
let slideWidth = $(window).width()*0.9/slideViewNum //每个swiper-slide宽度 0.9是外层容器的宽度是屏幕90%
let transformSlide = "" //鼠标悬停时的transform属性
let moveTime = 0 //轮播图从暂停位置移动到原本应到的位置用时

//初始化swiper
var peopleSwiper = new Swiper('.peopleSwiper .swiper-container', {
  slidesPerView: slideViewNum,
  paginationClickable: true,
  spaceBetween: 5,
  autoplay: true,
  speed: speedNum,
  disableOnInteraction: true,
  loop:true,
  freeMode: true
});


//鼠标悬停停止离开继续
$('.peopleSwiper').hover(function(){
  transformSlide = document.getElementsByClassName("swiper-container")[0].getElementsByClassName("swiper-wrapper")[0].style.transform;

  //轮播图原本应移动到的位置
  let oldPosition = -1 *parseInt(document.getElementsByClassName("swiper-container")[0].getElementsByClassName("swiper-wrapper")[0].style.transform.split("translate3d(")[1].split("px")[0]);

  //鼠标悬停时时轮播图位置
  let newPosition = -1 *parseInt(window.getComputedStyle(document.getElementsByClassName("swiper-container")[0].getElementsByClassName("swiper-wrapper")[0],false)["transform"].split("1, ")[2].split(",")[0]);

  //鼠标悬停时轮播图的真实transform属性
  let nowTarnsform = window.getComputedStyle(document.getElementsByClassName("swiper-container")[0].getElementsByClassName("swiper-wrapper")[0],false)["transform"];

  //修改轮播图从暂停位置移动到原本应到的位置用时
  moveTime = speedNum * ((oldPosition - newPosition) / slideWidth);

  //改变transform属性
  document.getElementsByClassName("swiper-container")[0].getElementsByClassName("swiper-wrapper")[0].style.transform = nowTarnsform;
  peopleSwiper.stopAutoplay();
},function(){
  document.getElementsByClassName("swiper-container")[0].getElementsByClassName("swiper-wrapper")[0].style.transform = transformSlide;
  document.getElementsByClassName("swiper-container")[0].getElementsByClassName("swiper-wrapper")[0].style.transitionDuration = moveTime+"ms";
  peopleSwiper.startAutoplay();
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1127281.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

计算机组成原理——解决了我的一些困惑

这个是复习408时&#xff0c;临时起意&#xff0c;把这些问题记录下来&#xff0c;我现在复习了一半有余&#xff0c;于是把这些发布出来&#xff08;如果后面有新的&#xff0c;我会在这里面进行更新&#xff09; 1、代码中的——类型转换&#xff08;int -> short&#xf…

客户保留是什么意思?

任何一家企业&#xff0c;都需要去思考在销售过程中有多少客户是有效的&#xff1f;又有多少客户是可以保留的&#xff1f;初具规模的企业通过CRM客户管理系统只一味的开发新客户&#xff0c;而忽略客户保留&#xff0c;反而会造成资源的浪费。那么我们常说的客户保留是什么意思…

18 - 如何设置线程池大小?

还记得在 16 讲中说过“线程池的线程数量设置过多会导致线程竞争激烈”吗&#xff1f; 今天再补一句&#xff0c;如果线程数量设置过少的话&#xff0c;还会导致系统无法充分利用计算机资源。那么如何设置才不会影响系统性能呢&#xff1f; 其实线程池的设置是有方法的&#…

出差学小白知识No5:|Ubuntu上关联GitLab账号并下载项目(ssh key配置)

1 注冊自己的gitlab账户 有手就行 2 ubuntu安装git &#xff0c;并查看版本 sudo apt-get install git git --version 3 vim ~/.ssh/config Host gitlab.example.com User your_username Port 22 IdentityFile ~/.ssh/id_rsa PreferredAuthentications publickey 替换gitl…

python实现批量pdf转txt和word

文章目录 背景需求环境安装完整代码效果 背景需求 已经获取到了大量的pdf在download文件夹中&#xff0c;但是我需要的是txt文件和word文件&#xff5e; 环境安装 pip install pdf2docx pdfminer.six完整代码 # pip install pdf2docx pdfminer.siximport os from pdf2docx …

【LeetCode刷题-数组】--27.移除元素

27.移除元素 class Solution {public int removeElement(int[] nums, int val) {int slow 0,fast 0,n nums.length;while(fast < n){if(nums[fast] ! val){nums[slow] nums[fast];slow;}fast;}return slow;} }

Real3D FlipBook jQuery Plugin 3.41 Crack

Real3D FlipBook 和 PDF 查看器 jQuery 插件 - CodeCanyon 待售物品 实时预览 截图 视频预览 Real3D Flipbook jQuery 插件 - 1 Real3D Flipbook jQuery 插件 - 2 Real3D Flipbook jQuery 插件 - 3 新功能 – REAL3D FLIPBOOK JQUERY 插件的 PDF 到图像转换器 一款用于将…

在亚马逊购买产品时怎么选择自动收货方式

在亚马逊购买产品时&#xff0c;通常可以在下单时选择不同的收货方式&#xff0c;包括自动收货方式。以下是一般的购买流程&#xff1a; 登录亚马逊账号&#xff1a;打开网站&#xff0c;登录账号&#xff0c;如果没有账号&#xff0c;可以先创建一个。 浏览和添加商品&#…

Java JSON字符串转换成JSONArray对象,遍历JSONArray

JSON字符串转换成JSONArray对象&#xff0c;遍历JSONArray&#xff1a; // 一个未转化的字符串 String str "[{name:a,value:aa},{name:b,value:bb},{name:c,value:cc},{name:d,value:dd}]" ;// 首先把字符串转成 JSONArray 对象 JSONArray jsonArray JSONArray.p…

初探亚马逊 AI 编程助手 CodeWhisperer

前言 4月18日&#xff0c;亚马逊云科技宣布&#xff0c;实时 AI 编程助手 Amazon CodeWhisperer 正式可用,同时推出的还有供所有开发人员免费使用的个人版&#xff08;CodeWhisperer Individual&#xff09;。Amazon CodeWhisperer 是一个通用的、由机器学习驱动的代码生成器&…

Windows下 MySql 5.7授权远程登陆

1.用管理员身份打开mysql Client 2.输入密码登录 3.使用mysql数据库&#xff0c;输入“use mysql” 4.查看当前服务中使用的用户 select host,user form user; 5.授权 grant all privileges on *.* to 用户名% identified by 密码 with grant option; 6.成功后&#xff0c;刷…

众和策略:612家公司三季报折射经济复苏力度

超七成前三季度效果同比添加 近三成第三季度效果环比添加 Choice数据闪现&#xff0c;到10月23日&#xff0c;已有612家A股公司宣告前三季度效果或效果预告&#xff0c;其间跨越七成公司结束同比添加&#xff0c;近三成公司第三季度结束了效果环比添加&#xff0c;充分彰显出中…

音视频(一)之使用FFMpeg工具推流并搭建流媒体服务器Nginx + RTMP

协议介绍 RTMP协议 全称&#xff1a;Real Time Messaging Protocol&#xff0c;实时消息传送协议介绍&#xff1a;是Adobe Systems公司为Flash播放器和服务器之间音频、视频和数据传输开发的开放协议协议&#xff1a;长连接TCP原理&#xff1a;每个时刻的数据收到后立刻转发延…

GB28181学习(十一)——控制(PTZ、镜头、光圈等控制)

要求 源设备向目标设备发送控制命令&#xff0c;控制命令类型包括&#xff1a; 摄像机云台控制远程启动录像控制报警布防/撤防报警复位强制关键帧拉框放大/缩小看守位控制PTZ精准控制存储卡格式化目标跟踪软件升级设备配置 设备配置的内容包括&#xff1a; 基本参数视频参数范…

ASO优化之什么是长尾关键词

通常长尾关键词的竞争通常较小&#xff0c;我们可以通过优化长尾关键词&#xff0c;来更轻松地在搜索结果中获得高排名。那么我们需要找到哪些应该优化的关键词以及如何优化。 1、长尾关键词的好处。 长尾关键字中添加的详细信息可以帮助缩小受众群体的范围&#xff0c;使得长…

python爬虫入门(四)爬取猫眼电影排行(使用requests库和正则表达式)

本例中&#xff0c;利用 requests 库和正则表达式来抓取猫眼电影 TOP100 的相关内容。 1.目标 提取出猫眼电影 TOP100 的电影名称、时间、评分、图片等信息&#xff0c;提取的站点 URL 为 http://maoyan.com/board/4&#xff0c;提取的结果会以文件形式保存下来。 2.抓取分析…

迅为龙芯2K1000开发板加载PMON镜像

注意&#xff1a;这里不建议大家在没有 Ejtag 的情况下对 PMON 进行操作&#xff0c;以免开发板变砖。 设置完网络后&#xff0c;我们输入命令 load -f 0xbfc00000 -r tftp://192.168.1.38/gzrom-dtb.bin&#xff0c;其中 192.168.1.38 为虚拟机 Ubuntu 的 IP 地址&#xff0…

数字孪生 Digital Twin 标准体系

1.什么是数字孪生&#xff1f; 数字孪生&#xff08;Digital T w in &#xff09;作为一种在信息世界刻画物理世界 、仿真物理世界 、优化物理世界 、可视化物理世界的重要技术 &#xff0c;为实现数字化转型 、智能化&#xff08;如智慧城市 、智能制造&#xff09; 、服务化 …

工业RFID系统识别原理

RFID技术是一种无线通信技术&#xff0c;可以实现非接触式的标签信息识别和读取&#xff0c;常常也被应用在工业生产、物流仓储等领域。工业RFID系统可以通过无线电信号识别和跟踪工业生产和管理领域中的物体&#xff0c;以下是工业RFID系统组成及相关应用介绍。 工业RFID系统组…

雅可比矩阵和雅可比坐标

雅可比行列式的简要介绍 一、说明 在本教程中&#xff0c;您将回顾一下雅可比行列式的简单介绍。完成本教程后&#xff0c;您将了解&#xff1a; 雅可比矩阵收集了可用于反向传播的多元函数的所有一阶偏导数。雅可比行列式在变量之间变化时非常有用&#xff0c;它充当一个坐标空…