0

需求:第一张是video,其余三张是图片,一起轮播;
bug:最后一张图片轮播到第一张video时有空白,怎么去除?
目前处理的方法:是在data里的sliders前后都加上video,但是这样暂停或播放完视频时,继续轮播就会出现两个video,一个是初始状态,另一个是暂停或者播放完时的状态,虽然很短暂,一闪而过,但还是可以看的见,并且下方还是出现5个小点点(我只需要4个小点点),这样的bug又该怎么解决?请各位前端大神赐教
如图:
1570688619(1).png
1570688759(1).png

<template>
<div>

<div id="sidebar">
  <div class='panel'>
    <div id="slider">  
      <div class="window" @mouseover="stop" @mouseleave="player">
        <!-- 轮播图片 -->

        <ul class="container" :style="containerStyle">
          <li @click="dianji(sliders[sliders.length - 1].a)">        
            <img :src="sliders[sliders.length - 1].img" alt="">              
          </li>
          
          <li v-for="(item, i) in sliders" >
            <video v-if="item.type == 'video_pro'" :id="item.id" class="video-js vjs-big-play-centered" 
              controls data-setup="{}">
              <source :src="item.video" type='video/mp4' class="video_item">               
            </video>               
            <img class="img"  v-else="item.type == 'image'" @click="dianji(item.a)" :src="item.img" alt=""> 
    
          </li>
          <li @click="dianji(sliders[0].a)">
            <img :src="sliders[0].img" alt="">         
          </li>
        </ul>

        <!-- 轮播左右箭头 -->
        <ul class="direction">
          <li class="left" @click="move(450, 1, speed)">
            <svg class="icon" width="18px" height="18px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z"  /></svg>
          </li>
          <li class="right" @click="move(450, -1, speed)">
            <svg class="icon" width="18px" height="18px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z"  /></svg>
          </li>
        </ul>
        <!-- 轮播圆点 -->
        <ul class="dots">
          <li v-for="(dot, i) in sliders" :key="i" 
            :class="{dotted: i === (currentIndex-1)}" @click = jump(i+1)>
          </li>
        </ul>

      </div>
    </div>
  </div>
</div>    

</div>
</template>
<script>

import Video from 'video.js'

export default {

name: 'Rotation_chart',
props: {
  initialSpeed: {
    type: Number,
    default: 30
  },
  initialInterval: {
    type: Number,
    default: 4
  }
},
data () {
  return {
    sliders:[
     { 
        id: 'myVideo1',
        type: 'video_pro',         
        video: 'https://mooc.len.com/wp-content/uploads/2018/11/20181128.mp4',
      },
      {   
        type: 'image',    
        img: require('../public/images/acronym.jpg'),
        a: 'sip:selfser@len.com'           
      },       
      {
        type: 'image',
        img: require('../public/images/studio.jpg'),
        a: 'http://cai.xyz'
      },
      {
        type: 'image',
        img: require('../public/images/baibianxiaoka.png'),
        a: 'http://ss.len.com'
      },
      { 
        id: 'myVideo1',
        type: 'video_pro',         
        video: 'https://mooc.len.com/wp-content/uploads/2018/11/20181128.mp4',
      },
    
    ],
    currentIndex:1,
    distance:-450,
    transitionEnd: true,
    speed: this.initialSpeed,
    playBtn: false,    //播放
  }
},
computed:{
  containerStyle() {
    return {
      transform:`translate3d(${this.distance}px, 0, 0)`
    }
  },
  interval() {
    return this.initialInterval * 1500
  },
},
mounted() {
  this.init();
  this.initVideo()
},
methods:{
  init() {
    this.player()
    window.onblur = function() { this.stop() }.bind(this)
    window.onfocus = function() { this.player() }.bind(this)
  },
  move(offset, direction, speed) {
    console.log(speed)
    if (!this.transitionEnd) return
    this.transitionEnd = false
    direction === -1 ? this.currentIndex += offset/450 : this.currentIndex -= offset/450
    if (this.currentIndex > 4) this.currentIndex = 1
    if (this.currentIndex < 1) this.currentIndex = 4

    const destination = this.distance + offset * direction
    this.animate(destination, direction, speed)
  },
  animate(des, direc, speed) {
    if (this.temp) {
      window.clearInterval(this.temp);
      this.temp = null ;
    }
    this.temp = window.setInterval(() => {
      if ((direc === -1 && des < this.distance) || (direc === 1 && des > this.distance)) {
        this.distance += speed * direc
      } else {
        this.transitionEnd = true
        window.clearInterval(this.temp)
        this.distance = des
        if (des < -1820) this.distance = -450
        if (des > -450) this.distance = -1820
      }
    }, 50)
  },
  jump(index) {
    const direction = index - this.currentIndex >= 0 ? -1 : 1;
    const offset = Math.abs(index - this.currentIndex) * 450;
    const jumpSpeed = Math.abs(index - this.currentIndex) === 0 ? this.speed : Math.abs(index - this.currentIndex) * this.speed ;
    this.move(offset, direction, jumpSpeed)
  },
  
  player() {     
    if (this.timer || this.playBtn == true) {
      window.clearInterval(this.timer)
      this.timer = null
    }
    else{
      this.timer = window.setInterval(() => {       
        this.move(450, -1, this.speed)
      }, this.interval)
    }             
  },
  stop() {
    window.clearInterval(this.timer)
    this.timer = null
  },
  dianji(a){
    window.open(a)
  },
  // 播放视频时轮播图状态
  initVideo() {     
    let leftArrow = $(".left");  //轮播图左箭头
    let rightArrow = $(".right");//轮播图右箭头
    let dots = $(".dots");       //轮播图四个点点
    let playButton = $("button .vjs-big-play-button");
    let that = this;
    let myPlayer1 = Video('myVideo1');
    // let myPlayer2 = Video('myVideo2');
    
    
    // 播放视频时隐藏左右箭头和四个点,并停止轮播
    myPlayer1.on('play',() =>{
      console.log('正在播放');            
      leftArrow.hide()       
      rightArrow.hide()      
      dots.hide()
      this.playBtn = true

    }); 
    //暂停视频时显示左右箭头和四个点,并启动轮播
    myPlayer1.on('pause',() =>{
      console.log("暂停中")
      leftArrow.show()
      rightArrow.show()
      dots.show()
      playButton.show()
      this.playBtn = false
    }); 
    //结束视频时显示左右箭头和四个点,并启动轮播

    myPlayer1.on('ended',() => {
      console.log('结束');     
      leftArrow.show()
      rightArrow.show()
      dots.show()
      playButton.show()
      this.playBtn = false 
      that.player()          //重新调用player()方法
     
    });


    //  // 播放视频时隐藏左右箭头和四个点,并停止轮播
    // myPlayer2.on('play',() =>{
    //   console.log('正在播放');            
    //   leftArrow.hide()       
    //   rightArrow.hide()      
    //   dots.hide()
    //   this.playBtn = true
    // }); 
    // //暂停视频时显示左右箭头和四个点,并启动轮播
    // myPlayer2.on('pause',() =>{
    //   console.log("暂停中")
    //   leftArrow.show()
    //   rightArrow.show()
    //   dots.show()
    //   this.playBtn = false
    // }); 
    //结束视频时显示左右箭头和四个点,并启动轮播
    // myPlayer2.on('ended',() => {
    //   console.log('结束');     
    //   leftArrow.show()
    //   rightArrow.show()
    //   dots.show()
    //   this.playBtn = false 
    //   that.player()          //重新调用player()方法
    // });

  }
}

}
</script>

1 个回答
0

自己写的轮播图吗?直接用swiper很方便的,还没有bug

撰写答案

推广链接