showWork.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. var goTop=document.querySelector('.aside');
  2. var left=document.querySelector('.left')
  3. var right=document.querySelector('.right')
  4. var pageOne=document.querySelector('.firstPage')
  5. var pageSecond=document.querySelector('.nextPage')
  6. var videolist = document.querySelectorAll('.video');
  7. var playControl=document.querySelectorAll('.play')
  8. var pageNo=1;
  9. var imgArr=['./images/01.png','./images/04.png','./images/02.png','./images/03.png'];
  10. console.log(pageOne)
  11. left.onclick=function(){
  12. if(pageNo>1){
  13. pageNo--;
  14. console.log(pageNo)
  15. left.src=imgArr[0]
  16. right.src=imgArr[1]
  17. pageOne.style.display='block'
  18. pageSecond.style.display='none'
  19. }
  20. }
  21. right.onclick=function(){
  22. if(pageNo<2){
  23. pageNo++;
  24. console.log(pageNo)
  25. left.src=imgArr[3]
  26. right.src=imgArr[2]
  27. pageOne.style.display='none'
  28. pageSecond.style.display='block'
  29. }
  30. }
  31. // 给play事件绑定暂停函数
  32. ;[].forEach.call(videolist, function(i){
  33. i.addEventListener('play', pauseAll.bind(i))
  34. // console.log(isIE())
  35. if(isIE()){
  36. for (var a=0;a<playControl.length;a++){
  37. // console.log(playControl[a])
  38. playControl[a].style.opacity=1
  39. }
  40. // playControl[i].style.opacity=0
  41. }else{
  42. playControl.forEach(function(item,index){
  43. if(i==index){
  44. item.style.opacity=0
  45. }
  46. else {
  47. item.style.opacity=1
  48. }
  49. })
  50. }
  51. });
  52. if(isIE()){
  53. for (var n=0;n<playControl.length;n++){
  54. (function(n){
  55. playControl[n].onclick=function(){
  56. for (var x=0;x<playControl.length;x++){
  57. playControl[x].style.opacity=1
  58. }
  59. if (videolist[n].paused) {
  60. videolist[n].play();
  61. playControl[n].style.opacity=0
  62. } else {
  63. videolist[n].pause();
  64. playControl[n].style.opacity=1
  65. }
  66. }})(n)
  67. }
  68. }else{
  69. playControl.forEach(function(item,index){
  70. item.onclick=function(){
  71. playControl.forEach(function(item,index){
  72. item.style.opacity=1
  73. })
  74. if (videolist[index].paused) {
  75. videolist[index].play();
  76. item.style.opacity=0
  77. } else {
  78. videolist[index].pause();
  79. item.style.opacity=1
  80. }
  81. }
  82. })
  83. }
  84. function isIE() {
  85. if(!!window.ActiveXObject || "ActiveXObject" in window){
  86. return true;
  87. }else{
  88. return false;
  89.   }
  90. }
  91. function pauseAll() {
  92. var self = this;
  93. ;[].forEach.call(videolist, function(i) {
  94. // 将 videos 中其他的 video 全部暂停
  95. i !== self && i.pause();
  96. // i !== self && i.load();
  97. });
  98. };
  99. window.onload = function () {
  100. window.onscroll = function () {
  101. var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  102. // 判断是否出现返回顶部
  103. if(scrollTop>50){
  104. goTop.classList.add('show')
  105. }else{
  106. goTop.classList.remove('show')
  107. }
  108. }
  109. }