SuperSlide播放暂停解决方案

文章目录

环境：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();
	});
}

亲测有效！！！