美文网首页让前端飞Web前端之路
SuperSlide播放暂停解决方案

SuperSlide播放暂停解决方案

作者: 奋斗的小鹿l | 来源:发表于2019-10-28 17:00 被阅读0次

环境: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={};
$("#demo").slide({mainCell:"",autoPlay:true,effect:"topMarquee",vis:5,interTime:50,mouseOverStop:false,playStateFuns:playStateFuns});

3、自定义播放暂停的方法

function play(isStop){
    var playStateFunMy = playStateFuns.playStateFun;
    var pauseStateFunMy = playStateFuns.pauseStateFun;
    if(playStateFunMy == undefiend || pauseStateFunMy  == undefiend {
        return;
    }
    if(isStop){
        playStateFunMy();
    }else{
        pauseStateFunMy();
    }
}

4、自定义鼠标进入和离开的方法,该方法在页面加载完轮播列表时调用

function bindMouseHover(){
    var playStateFunMy = playStateFuns.playStateFun;
    var pauseStateFunMy = playStateFuns.pauseStateFun;
    if(playStateFunMy == undefiend || pauseStateFunMy  == undefiend ){
        return;
    }
    $("#demo").mouseenter(function(){
        pauseStateFunMy();
    });
    $("#demo").mousleave(function(){
        playStateFunMy();
    });
}

亲测有效!!!

相关文章

网友评论

    本文标题:SuperSlide播放暂停解决方案

    本文链接:https://www.haomeiwen.com/subject/tbbbvctx.html