var video=document.querySelectorAll('video') // console.log(video) var goTop=document.querySelector('.aside') var leftArrow = document.querySelector('.leftArrow'); var rightArrow = document.querySelector('.rightArrow'); var videolist = document.querySelectorAll('.video'); var playControl=document.querySelectorAll('.play') // var videoTitle =document.querySelectorAll('.video-title') console.log(playControl[0],videolist[0]) // var douyin = document.querySelector('.douyin') var kuaishou = document.querySelector('.kuaishou') var DYtip = document.querySelector('.DYtip') var KStip = document.querySelector('.KStip') var dom=document.querySelector('.team-bottm') // console.log(videolist, leftArrow, rightArrow) var videoindex = 0 var videoUrl = ["http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/1.m4v", "http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/2.m4v", "http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/3.m4v", "http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/4.m4v", "http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/5.m4v", "http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/6.m4v", "http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/7.m4v", "http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/8.m4v"] var FMArr=['./images/1.jpg','./images/2.jpg','./images/3.jpg','./images/4.jpg','./images/5.jpg','./images/6.jpg','./images/7.jpg','./images/8.jpg'] // for(var v=0;v= 8) { videoindex = 0 } changeVideo(videoindex) } leftArrow.onclick = function () { videoindex--; if (videoindex < 0) { videoindex = 7 } changeVideo(videoindex) } function changeVideo(index) { var arr = [index, index + 1, index + 2]; if(isIE()){ for(var i=0;i= 8 ? arr[i] - 8 : arr[i]; } for(var ind in videolist){ videolist[ind].src=videoUrl[arr[ind]] videolist[ind].poster=FMArr[arr[ind]] } // for(var inde in videoTitle){ // videoTitle[inde].innerHTML=pArr[arr[inde]] // } }else{ arr = arr.map(function(item, index) { return item >= 8 ? item - 8 : item }) videolist.forEach(function(item, ind){ item.src = videoUrl[arr[ind]] item.poster=FMArr[arr[ind]] }); // videoTitle.forEach(function(item, ind) { // item.innerHTML = pArr[arr[ind]] // }); } } // rightArrow.addEventListener('click') // videolist.forEach((item, ind) => { // item.οnclick = function () { // if (item.paused) { // item.play(); // } else { // item.pause(); // } // } // }); // videolist[0].οnclick = function () { // if (videolist[0].paused) { // videolist[0].play(); // } else { // videolist[0].pause(); // } // } function pauseAll() { var self = this; ;[].forEach.call(videolist, function(i) { // 将 videos 中其他的 video 全部暂停 i !== self && i.pause(); // i !== self && i.load(); }); }; // 滚动到位置后 左右图片淡入 function getPoint(obj) { //获取某元素以浏览器左上角为原点的坐标 var t = obj.offsetTop; //获取该元素对应父容器的上边距 var l = obj.offsetLeft; //对应父容器的上边距 //判断是否有父容器,如果存在则累加其边距 while (obj = obj.offsetParent) { t += obj.offsetTop; //叠加父容器的上边距 l += obj.offsetLeft; //叠加父容器的左边距 } return { x: l, y: t } } function isIE() { if(!!window.ActiveXObject || "ActiveXObject" in window){ return true; }else{ return false;   } } function windowLoad () { var top = getPoint(dom).y; //距离文档顶部的距离 var windowHeight = document.documentElement.clientHeight; //可视区域的高度 window.onscroll = function () { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (top+dom.offsetHeight >= scrollTop && top+dom.offsetHeight <= windowHeight + scrollTop) { console.log('在可视区域了',kuaishou); kuaishou.classList.add('show'); this.setTimeout(function(){ KStip.classList.add('show'); },800) this.setTimeout(function(){ douyin.classList.add('show'); },1200) this.setTimeout(function(){ DYtip.classList.add('show'); },2000) }else{ kuaishou.classList.remove('show'); KStip.classList.remove('show'); douyin.classList.remove('show'); DYtip.classList.remove('show'); } // 判断是否出现返回顶部 if(scrollTop>50){ goTop.classList.add('show') }else{ goTop.classList.remove('show') } } } window.onload=windowLoad; //给ie9添加classList属性 if (!("classList" in document.documentElement)) { Object.defineProperty(HTMLElement.prototype, 'classList', { get: function() { var self = this; function update(fn) { return function(value) { var classes = self.className.split(/\s+/g), index = classes.indexOf(value); fn(classes, index, value); self.className = classes.join(" "); } } return { add: update(function(classes, index, value) { if (!~index) classes.push(value); }), remove: update(function(classes, index) { if (~index) classes.splice(index, 1); }), toggle: update(function(classes, index, value) { if (~index) classes.splice(index, 1); else classes.push(value); }), contains: function(value) { return !!~self.className.split(/\s+/g).indexOf(value); }, item: function(i) { return self.className.split(/\s+/g)[i] || null; } }; } }); }