SuperSlide.js插件实现当video视频播放完后再切换下一张

在修改网页的焦点图效果：当前焦点是视频的时候，暂停焦点图的自动轮播，当视频播放完成后再启用焦点图的自动轮播。查看代码发现该焦点图使用的是 SuperSlide.js 插件，这是一款存在时间挺长的 jquery 焦点图插件，但多年的更新，插件的参数还是不够丰富全面，一些效果实现起来会比较麻烦。不过庆幸的是 SuperSlide.js 插件有提供 startFun 和 endFun 函数。

温馨提示：以下代码适用于 SuperSlide 2.1+版本。

实现代码：

HTML代码

<div class="slides">
    <div class="bd">
		<ul>        
			<li>
				<video id="video0" src="video.mp4" preload="auto" muted autoplay loop></video>
			</li>        
			<li>
				<img src="slides01.jpg" alt="焦点图01">
			</li>
			<li>
				<img src="slides02.jpg" alt="焦点图02">
			</li>
		</ul>
    </div>
    <div class="hd">
		<ul class="ul"></ul>
    </div>
    <a class="prev" href="javascript:void(0)"></a>
    <a class="next" href="javascript:void(0)"></a>
	<a class="playState" href="javascript:void(0)"></a>
</div>

jQuery代码

var playState = $(".slides .playState");
$(".slides").slide({
    titCell: ".hd ul",
    mainCell: ".bd ul", effect: "fold", autoPlay: true, interTime: 3000, delayTime: 1000, autoPage: true, trigger: "click", mouseOverStop:false,
	startFun: function(i, c, slider, titCell, mainCell, targetCell, prevCell, nextCell){
		if($(".slides .bd li").eq(i).find("video").length > 0){
			if(!playState.hasClass("pauseState")){
				playState.trigger("click");
			}			
			var _video = document.getElementById('video'+i);
			_video.play();
			_video.loop = false;
    		_video.addEventListener('ended', function(){
				if(playState.hasClass("pauseState")){
    				playState.trigger("click");
				}
   			},false);
		}
	}
});

如果第一个焦点图是视频的时候，再在上面的代码下边添加以下代码

playState.trigger("click");
var _video0 = document.getElementById('video0');
	_video0.loop = false;
	_video0.addEventListener('ended', function(){
	if(playState.hasClass("pauseState")){
			playState.trigger("click");
	}
},false);