SuperSlide播放暂停解决方案

最新推荐文章于 2025-03-09 18:19:58 发布

IT打工匠

最新推荐文章于 2025-03-09 18:19:58 发布

阅读量1.6k

点赞数

文章标签： superslide播放暂停 superslide

本文链接：https://blog.csdn.net/lu_wei_wei/article/details/102783637

版权

本文介绍了如何在SuperSlide.2.1.1.source.js中添加播放暂停功能，包括在特定行新增代码，SuperSlide调用时添加参数playStateFuns，以及自定义播放、暂停和鼠标交互的方法。详细步骤包括四个部分，已通过实际测试验证其有效性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1、在SuperSlide.2.1.1.source.js大概369行新增
2、SuperSlide调用，新增参数playStateFuns
3、自定义播放暂停的方法
4、自定义鼠标进入和离开的方法,该方法在页面加载完轮播列表时调用

环境：SuperSlide.2.1.1.js
背景：最近在项目中使用SuperSlide轮播滚动展示信息，需要点击轮播中的某一条弹出一个iframe后展示详细信息，这时需要暂停轮播，关闭iframe后继续播放。
在网上找过解决方法，但是貌似不好使，达不到需求。
经过翻看SuperSlide源码，想到修改源码后解决，在SuperSlide的slide方法options参数中增加一个对象参数用来接收内部的播放和暂停事件，手动在外层触发；

1、在SuperSlide.2.1.1.source.js大概369行新增

if(opts.playStateFuns){
   
	//将superSlide声明的播放和暂停的方法复制到自定义的参数上面
	opts.playStateFuns.playStateFun=playStateFun;
	opts.playStateFuns.pauseStateFun=pauseStateFun;
}

2、SuperSlide调用，新增参数playStateFuns

superslide2官方参数说明

//用于接收superSlide.js内部对播放和暂停的事件
var playStateFuns=

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

IT打工匠

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

七、触屏事件，移动端常见特效，classList 属性，click 延时解决方案，移动端常用开发插件，移动端常用开发框架，本地存储

快乐de馒头

01-03

347

1.1. 触屏事件 1.1.1 触屏事件概述移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。常见的触屏事件如下： 1.1.2 触摸事件对象（TouchEvent） TouchEvent是一类描述..

JavaScript WebAPI 系列七移动端常见特效；classList属性；click延迟插件；Wwiper轮播图插件；视频插件；开发框架等，本地存储

m0_55170432的博客

03-30

242

1.0 移动端常见特效 1.1 案例：移动端轮播图移动端轮播图功能和基本PC端一致。可以自动播放图片手指可以拖动播放轮播图案例分析很多：可以去看笔记 window.addEventListener('load', function() { // alert(1); // 1. 获取元素 var focus = document.querySelector('.focus'); var ul = focus.children[0]; // 获得focus

2 条评论您还未登录，请先登录后发表或查看评论

jquery slider带暂停播放功能和时间轴图片幻灯片代码

11-16

jquery slider带暂停播放功能和时间轴图片幻灯片代码

SuperSlide插件轮播的暂停与轮播

weixin_34279184的博客

03-25

1730

近来有这样一个需求, 需要实现SuperSlide轮播的暂停与播放的控制。难点: mouseOverStop: false //重点1: (必须设置为false, 否则会干扰到 play 状态的切换) playStateCell 重点2: 需要模拟hover事件才能增加/删除"pauseState"类名,而且需要解绑单击事件取消j...

javascrip网页设计案例，SuperSlide+bootstrap+html经典组合

最新发布

xnqys的博客

03-09

816

JavaScript作为一种强大的脚本语言，作为网页设计案例，superslide+bootstrap+html 经典组合，在网页设计领域发挥着举足轻重的作用，能够为网页赋予丰富的交互性与动态功能。

播放/暂停的 slide滑动焦点图

freejs

08-14

225

播放/暂停的 slide滑动焦点图演示 XML/HTML Code <div class="container"> <div id="slides"> <img src="../mohe.png" alt=""> <img src=".

jQuery 的 slideUp 动画，当鼠标快速连续触发, 动画会滞后反复执行，该如何处理呢

php_martin的博客

09-03

397

jQuery的slideUp动画，当鼠标快速连续触发,动画会滞后反复执行，该如何处理

SuperSlide v2.1.1 轻松解决网站大部分特效展示问题

12-05

1、jquery.SuperSlide.2.1.1.js 为压缩后的文件 2、jquery.SuperSlide.2.1.1.source.js 为源代码文件 3、demo文件内为所有基础效果示例，例如 demo/1.0-switchTab.html 为tab切换基本示例 4、demo/iframe 文件夹并不是基本示例，请忽略！！

能上下滚动的轮播图SuperSlide插件

11-01

**SuperSlide插件详解** ...无论是简单的图片轮播还是复杂的动态展示，它都能提供出色的解决方案。结合良好的文档和丰富的API，开发者可以轻松地将SuperSlide集成到自己的项目中，创造出富有创意的上下滚动轮播图。

图片轮播，支持循环滚动播放

07-06

这类插件通常包含了完整的图片轮播解决方案，包括HTML结构、CSS样式以及JavaScript代码，方便开发者快速集成到项目中。开发者只需要根据文档配置参数，就能定制适合自己的图片轮播效果。图片轮播的常见功能和特性...

SuperSlide2.1_20个基础效果+72个扩展效果

06-04

文件列表 1、jquery.SuperSlide.2.1.js 为压缩后的文件 2、jquery.SuperSlide.2.1.source.js 为源代码文件 3、demo文件内为所有基础效果示例 4、demo/iframe 5、otherDemo文件内为所有扩展效果示例 6、syntaxhighlighter 文件夹为代码着色插件

SuperSlide2.1滑动门jQuery插件.zip

07-04

SuperSlide2.1滑动门jQuery插件是一款包含网站上常用的“焦点图幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等效果。

SuperSlide2.1.20个基础效果和72个扩展效果

03-27

SuperSlide2.1的20个基础效果和72个扩展效果，欢迎下载

superslide2.1.1 最新收费【20个基础效果+72个扩展效果】

11-03

SuperSlide v2.1.1 所有案例

10-16

/*! * SuperSlide v2.1.1 * 轻松解决网站大部分特效展示问题 * 详尽信息请看官网：http://www.SuperSlide2.com/ * * Copyright 2011-2013, 大话主席 * * 请尊重原创，保留头部版权 * 在保留版权的前提下可应用于个人或商业用途 * v2.1.1：修复当调用多个SuperSlide，并设置returnDefault:true 时返回defaultIndex索引错误 */ 1、jquery.SuperSlide.2.1.1.js 为压缩后的文件 2、jquery.SuperSlide.2.1.1.source.js 为源代码文件 3、demo文件内为所有基础效果示例，例如 demo/1.0-switchTab.html 为tab切换基本示例 4、demo/iframe 文件夹并不是基本示例，请忽略！！如果你购买了扩展效果，还会看到如下文件： 5、otherDemo文件内为所有扩展效果示例 6、syntaxhighlighter 文件夹为代码着色插件，可以忽略感谢您的支持！

SuperSlide 2.1.2.zip

05-27

SuperSlide是开源jQuery插件，致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决！从此无需网上苦苦寻觅特效，无需加载n个插件，无需害怕代码冲突，你需要的只是一个SuperSlide！还可以多个SuperSlide组合创造更多效果哦~（兼容包括ie6的绝大部分浏览器）SuperSlide 2.1.2 更新日志：2015-11-031.增加参数设置vis:"auto"，仅适应于:scroll:1, effect:"left或leftLoop"情况(也就是通常的单图片滚动自适应宽度焦点图)；2.修复mouseOverStop和autoPlay均为false下，点击切换按钮后会自动播放bug。

index_02_3 中间 js

amnotsuperior的专栏

03-29

510

SuperSlidev2.1 轮播图片和无缝滚动

anbaxiao3312的博客

06-13

340

SuperSlidev2.1 轮播图片和无缝滚动使用方法点击链接：http://down.admin5.com/demo/code_pop/18/562/index.html 简单使用方法如下 html <div class="bd"><ul><li _src="url(images/1.jpg)" style="background...

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

米拉

10-24

3773

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

SuperSlide 2.1：一站式网站特效解决方案

结合描述中的信息，我们可以推断SuperSlide是一个用于网站设计的JavaScript库或插件，专门用来解决网站中常见的特效展示问题，比如幻灯片展示、标签切换、图片滚动等。描述部分详细介绍了SuperSlide的特点，它能够...