SuperSlide插件轮播的暂停与轮播

最新推荐文章于 2022-11-17 16:49:47 发布
最新推荐文章于 2022-11-17 16:49:47 发布
阅读量1.6k 收藏 2
点赞数
文章标签： javascript xhtml ViewUI
原文链接：https://segmentfault.com/a/1190000008827250
版权

近来有这样一个需求, 需要实现SuperSlide轮播的暂停与播放的控制。

难点:

  1. mouseOverStop: false //重点1: (必须设置为false, 否则会干扰到 play 状态的切换)

  2. playStateCell 重点2: 需要模拟hover事件才能 增加/删除"pauseState"类名,而且需要解绑单击事件

  3. 取消jquery绑定的hover事件的正确方式：

setTimeout(function () {
    selfDOM.unbind('mouseenter').unbind('mouseleave');
 }, 0);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Language" content="zh-CN">
    <title>SuperSlide</title>
</head>

<body>
    <style type="text/css">
    /* css 重置 */
    
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    body {
        background: #fff;
        font: normal 12px/22px 宋体;
    }
    
    img {
        border: 0;
    }
    
    a {
        text-decoration: none;
        color: #333;
    }
    /* 本例子css */
    
    .picScroll-left {
        width: 450px;
        overflow: hidden;
        position: relative;
        border: 1px solid #ccc;
    }
    
    .picScroll-left .hd {
        overflow: hidden;
        height: 30px;
        background: #f4f4f4;
        padding: 0 10px;
    }
    
    .picScroll-left .hd .prev,
    .picScroll-left .hd .next {
        display: block;
        width: 5px;
        height: 9px;
        float: right;
        margin-right: 5px;
        margin-top: 10px;
        overflow: hidden;
        cursor: pointer;
        background: url("images/arrow.png") no-repeat;
    }
    
    .picScroll-left .hd .next {
        background-position: 0 -50px;
    }
    
    .picScroll-left .hd .prevStop {
        background-position: -60px 0;
    }
    
    .picScroll-left .hd .nextStop {
        background-position: -60px -50px;
    }
    
    .picScroll-left .hd ul {
        float: right;
        overflow: hidden;
        zoom: 1;
        margin-top: 10px;
        zoom: 1;
    }
    
    .picScroll-left .hd ul li {
        float: left;
        width: 9px;
        height: 9px;
        overflow: hidden;
        margin-right: 5px;
        text-indent: -999px;
        cursor: pointer;
        background: url("images/icoCircle.gif") 0 -9px no-repeat;
    }
    
    .picScroll-left .hd ul li.on {
        background-position: 0 0;
    }
    
    .picScroll-left .bd {
        padding: 10px;
    }
    
    .picScroll-left .bd ul {
        overflow: hidden;
        zoom: 1;
    }
    
    .picScroll-left .bd ul li {
        margin: 0 8px;
        float: left;
        _display: inline;
        overflow: hidden;
        text-align: center;
    }
    
    .picScroll-left .bd ul li .pic {
        text-align: center;
    }
    
    .picScroll-left .bd ul li .pic img {
        width: 120px;
        height: 90px;
        display: block;
        padding: 2px;
        border: 1px solid #ccc;
    }
    
    .picScroll-left .bd ul li .pic a:hover img {
        border-color: #999;
    }
    
    .picScroll-left .bd ul li .title {
        line-height: 24px;
    }
    </style>
    <div class="picScroll-left">
        <div class="hd">
            <a class="next"></a>
            <ul></ul>
            <a class="prev"></a>
            <span class="pageState"></span>
            <button class="playState">播放</button>
        </div>
        <div class="bd">
            <ul class="picList">
                <li>
                    <div class="pic">
                        <a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a>
                    </div>
                    <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
                </li>
                <li>
                    <div class="pic">
                        <a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a>
                    </div>
                    <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
                </li>
                <li>
                    <div class="pic">
                        <a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a>
                    </div>
                    <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
                </li>
                <li>
                    <div class="pic">
                        <a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic4.jpg" /></a>
                    </div>
                    <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
                </li>
                <li>
                    <div class="pic">
                        <a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic5.jpg" /></a>
                    </div>
                    <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图5</a></div>
                </li>
                <li>
                    <div class="pic">
                        <a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic6.jpg" /></a>
                    </div>
                    <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图6</a></div>
                </li>
            </ul>
        </div>
    </div>

    <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript" src="./jquery.SuperSlide.2.1.1.js"></script>
    <script type="text/javascript">
    $(function() {
        $(".picScroll-left").slide({
            titCell: ".hd ul",
            mainCell: ".bd ul",
            autoPage: true,
            effect: "left",
            autoPlay: true,
            vis: 3,
            trigger: "click",
            playStateCell: '.playState',
            mouseOverStop: false //重点1: (必须设置为false, 否则会干扰到 play 状态的切换)鼠标移到容器层（无缝滚动是mainCell）是否停止播放
        })
        $('.playState').on('click', function () {
          var self = this
          var selfDOM = $(this)
          
          selfDOM.hover() // 重点2
          
          // 重点3: 要设置为等hover生效后, 才能解绑hover事件
          setTimeout(function () {
            selfDOM.unbind('mouseenter').unbind('mouseleave');
          }, 0);
          if(selfDOM.hasClass('pauseState')) { // 暂停状态
            selfDOM.text('暂停')
          } else { // 播放状态
            selfDOM.text('播放')
          }
        })
    })
    </script>
</body>

</html>
weixin_34279184
关注
SuperSlide播放暂停解决方案
IT打工匠
10-28 1536
文章目录1、在SuperSlide.2.1.1.source.js大概369行新增2、SuperSlide调用，新增参数playStateFuns3、自定义播放暂停的方法4、自定义鼠标进入和离开的方法,该方法在页面加载的时候初始化 环境：SuperSlide.2.1.1.js 背景：最近在项目中使用SuperSlide轮播滚动展示信息，需要点击轮播中的某一条弹出一个iframe后展示详细信息，这时...
解决使用Vue-SuperSlide插件获取数据后没滚动效果问题
weixin_45264424的博客
04-02 851
解决思路，获取数据后使用v-if 重新渲染一遍dom，插件会重新初始化 <superslide :options="options1" v-if="superShow"> <div class="superslide-box1"> <div class="company-item" v-for="(item,index) in mlList" :key="index"> <div class="name">
自定义轮播图，实现无限轮播、自动轮播、按下停止轮播
brave_shine的博客
05-22 2383
本文将所有轮播图的功能实现全放在了自定义ViewPager中，若你的ViewPager需要实现轮播功能，只需要将ViewPager替换为CycleViewPager（注：本文V4包为低版本，如需要，请自行将监听更改为addOnPagechangeListener）。 主页面代码与正常使用ViewPager一致，演示采用的是在代码中实例CycleViewPager对象。
SuperSlide插件的用法
m0_52173534的博客
08-10 3012
SuperSlide是基于JQuery的一个轮播图插件，使用它可以便捷使用各种样式的轮播图 1.首先使用SuperSlide需要下载js文件 可以通过网址下载： http://www.superslide2.com/index.html 2.下载完成后解压，会有一个文件夹 3.将里面的js文件导入项目， 代码： <script src="js/SuperSlide2.1-demo-00/jquery1.42.min.js"></script> <script src="
SuperSlide插件的使用方法
最新发布
weixin_61665636的博客
11-17 2120
网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决！因为SuperSlide是基于jQuery的插件，所以前提必须先引用jQuery，再引用SuperSlide。从此无需网上苦苦寻觅特效，无需加载n个插件，无需害怕代码冲突，你需要的只是一个SuperSlide！查看参数以及更多效果展示请参考网站：http://www.superslide2.com/以下是默认的HTMl结构，分别是 ".hd" 里面包含ul， ".bd" 里面包含ul。
能上下滚动的轮播图SuperSlide插件
11-01
**SuperSlide插件详解** SuperSlide是一款强大的JavaScript轮播图插件，专为网页设计者和开发者提供方便、灵活的上下滚动轮播效果。这款插件不仅支持传统的左右滑动，还特别支持了垂直方向的上下滚动，为网页的动态...
jquery SuperSlide滑动门组合插件大全
11-02
**jQuery SuperSlide 滑动门插件详解** 在网页设计和开发中，动态效果的运用可以提升用户体验，其中滑动门（Sliding Doors）效果是一种常见的交互元素，用于展示内容或者导航菜单。jQuery SuperSlide 插件是专门...
jquery.superslide.js插件网站焦点新闻图片选项卡
11-22
每个图片或内容块都可以通过特定的类名或者数据属性与jQuery.superslide.js插件进行关联。 例如，可以这样设置HTML结构： ```html 新闻1"> 新闻1的详细描述 新闻2"> 新闻2的详细描述 <!-- 更多新闻...
图片轮播，支持循环滚动播放
07-06
对于“SuperSlide-150316185950”这个文件名，它可能是一个图片轮播插件或库的名称。这类插件通常包含了完整的图片轮播解决方案，包括HTML结构、CSS样式以及JavaScript代码，方便开发者快速集成到项目中。开发者只...
Js轮播图
weixin_51450341的博客
10-21 654
网页中的轮播图太常见了,几乎是每个首页必备,本篇博客记录的轮播图主要实现了如下功能:1.能够自动切换下一张图片,时间间隔为2秒钟2.能够单击按钮切换到相应的图片3.鼠标悬浮到图片上时,停止轮转4.鼠标离开,图片轮转继续5.1.设置上一张按钮,单击立刻切换到上一张图片,此按钮默认不显示,鼠标悬浮到图片上显示5.2.设置下一张按钮。
超简单 前端JS经典轮播图 包括鼠标移入暂停。
weixin_51938119的博客
11-12 814
超简单 前端JS经典轮播图 包括鼠标移入暂停。
jquery.SuperSlide.2.1.2--轮播（兼容到IE7 适用于整屏）
weixin_30426957的博客
11-08 1316
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h...
superslide 多次点击调用slide()和速度问题
qq_33593958的博客
12-12 3823
在开发过程中遇到很多大坑，比如css3中transition: 0s;会导致superslide调用参数interTime效果不起作用  &lt;div id="slide" class="slide"&gt;                                             &lt;div class="bd"&gt;                           ...
SuperSlide移动端使用注意
u010289111的专栏
06-02 3196
最近再使用superslide的时候出现了在移动端的不占位的问题就是回退页面的时候 我也是很诧异的，目前好像解决了，改变了它的调用位置。然后暂时目前看起来没有出现这样的问题。 解决方案的地址参考： http://www.superslide2.com/blog/?p=46 我们知道，html的执行顺序是从上而下的，对js的执行也是一样的。所以做好的做法是需要使用特效的对象结束后
superslide问题汇总
weixin_33810006的博客
06-04 1970
当显示分页按钮时&&vis>1：effect属性leftLoop不生效，原因是循环的话在图片最后一页有空位置，会分不清第几页，第一张图片接过去的话，下面分页不知道该显示第几页 不显示分页时可实现leftLoop效果 转载于:https://www.cnblogs.com/wszxx/p/10973635.html...
SuperSlide 知识点一
weixin_49982989的博客
02-17 531
SuperSlide 参数： 新手理解： 参数 版本 默认值 说明 type 2.1 slide 效果类型，可选"slide"||“menu”，引入type:“menu"专门处理菜单/导航效果 defaultPlay 2.1 true 默认是否执行效果（第一次运行是否执行效果）常用于导航/菜单 returnDefault 2.1 false 鼠标移出容器，是否返回默认状态，常用于导航/菜单 mouseOverStop 2.1 true 鼠标移到容器层（无缝滚动是mainCell）是否停止播放 playSta
SuperSlide——再次接触
weixin_34132768的博客
03-03 217
原来自己很早之前就接触过SuperSlider这个神奇的插件，原谅自己又得了“健忘症”，因此昨天就把自己“坑”了一把： 前言： 交易一期的项目即将上线，在解决测试同事们提出的bug的时候，无意间看到页面有一个神奇的现象： 看着这左右不停变换的图片，心里是不是有点高兴：这样的效果还真不错！可是头疼的却在后面…… 当企业资质下只有一张图片时，它就变成了两张一模一样的图片，而且还是静态的...
使用jQuery插件创建轮播图效果
"本文主要介绍了如何使用jQuery插件来实现轮播...首先，为了使用jQuery插件实现轮播图，你需要在页面中引入jQuery库。通常，你可以从官方网站下载jQuery库，或者通过CDN链接将其添加到`<head>`标签中。例如： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值