Javascript贯彻摄像轮播在pc端与移动端均可

作者: 今晚买四不像计算  发布:2019-09-13

前段时间顾客供给用Javascript实现录制轮播:

有意思味的同窗能够参开一下

上边写了一个程序达成摄像轮播,pc端与活动端均可以兑现,

但移动端,存在有一些bug;

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ";
<html>
<head>
<meta http-equiv="Content-Type" content="textml; charset=UTF-8">
<title>Insert title here</title>
</head>

<p>录像轮播11</p>
<div id="container"></div>

<p>录制轮播22</p>
</body>
<ml>

<script type="text/javascript">
var index=0;
var arr = new Array("71da9e4b6985a7b5951dd62ce7bb020d_7", "71da9e4b691a41961dcd6524593d39ee_7", "71da9e4b69efa71be86d625508ec9feb_7");

var container = document.getElementById("container");
function printPlayer(index){
//alert(arr.length);
if(index>arr.length-1){
index=0;
}
//container.removeElement;
container.innerHTML="";
var vid=arr[index];
if (navigator.userAgent.match(/iP(od|hone|ad)/i)) {
var video = document.createElement("video");
video.src = ";
video.onended=s2j_onPlayOver;
//video.addEventListener('ended',j2s_onPlayOver, false);
video.autoplay="true";
video.controls="controls"
container.appendChild(video);
}else{

var swf=";

container.innerHTML = "<OBJECT width='600' height='375' ><PARAM NAME=movie VALUE='"+vid+"'><param name='allowscriptaccess' value='always'>"
+"<param name='allowFullScreen' value='true' />"
+"<EMBED src='"+swf+"' width='600' height='375' TYPE='application/x-shockwave-flash' allowscriptaccess='always' allowFullScreen='true' /></EMBED>"
+"</OBJECT>";
<!-- container.innerHTML = "<OBJECT>"+swf+"</OBJECT>";-->

}
}

printPlayer(index);

/* function j2s_onplayover(){
index++;
printPlayer(index);

} */

function s2j_onPlayOver() {
alert('ssss');
index++;
printPlayer(index);
}
</script>

运作效果:
图片 1 

你或者感兴趣的篇章:

  • 原生JS实现活动端web轮播图详解(结合Tween算法造轮子)
  • 原生js实现移动支付轮播图、相册滑动特效
  • JS仿京东移动端手指拨动切换轮播图效果
  • 支撑活动端原生js轮播图
  • JavaScript兑现活动端轮播效果
  • flexslider.js完成活动端轮播
  • js完成活动端轮播图效果
  • 选用纯js + transition动画达成活动端web轮播图详解

本文由今晚买四不像发布于今晚买四不像计算,转载请注明出处:Javascript贯彻摄像轮播在pc端与移动端均可

关键词:

上一篇:没有了
下一篇:没有了