• 售前

  • 售后

热门帖子
入门百科

videojs+swiper实现淘宝商品详情轮播图

[复制链接]
亦池 显示全部楼层 发表于 2021-10-26 13:32:21 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了videojs+swiper实现淘宝商品详情轮播图的具体代码,供各人参考,具体内容如下
这个引用了videojs和swiper。实现结果雷同淘宝商品详情中的轮播图,首张轮播为视频:
当视频开始播放时,轮播制止。视频暂停时,轮播继续。
当视频播放中,滑动到下个slide时,视频暂停播放。

swiper手册
HTML部分:
  1. <!-- swiper轮播 -->
  2. <div class="swiper-container">
  3.    <div class="swiper-wrapper">
  4.        <div class="swiper-slide">
  5.            <video id="video" style="width: 100%;height: 100%;"  controls preload="none" poster="xxxx" class="video-js vjs-big-play-centered" >
  6.             <source src="xxxx" type="video/mp4">
  7.            </video>
  8.        </div>
  9.        <div class="swiper-slide"><img src="xxxx" alt=""></div>
  10.         <div class="swiper-slide"><img src="xxxx" alt=""></div>
  11.         <div class="swiper-slide"><img src="xxxx" alt=""></div>
  12.         <div class="swiper-slide"><img src="xxxx" alt=""></div>
  13.    </div>
  14.    <!-- 如果需要分页器 -->
  15.    <div class="swiper-pagination"></div>
  16. </div>
复制代码
js部分:
  1. //新建videojs对象
  2. var player = videojs('video', {
  3.      muted: true,
  4.      controls: true,
  5.      // loop: true,
  6. });
  7. // swiper轮播
  8. var mySwiper = new Swiper ('.swiper-container', {
  9.      direction:'horizontal', // 轮播图的方向,也可以是vertical方向
  10.      loop: true,  //循环播放
  11.      autoplay:3000,// slide自动切换时间
  12.      speed:2000,// slide滑动动画时间
  13.      height: 100,
  14.      pagination: '.swiper-pagination',  // 如果需要分页器,即下面的小圆点
  15.      autoplayDisableOnInteraction : false,// 这样,即使我们滑动之后, 定时器也不会被清除
  16.      offsetWidth: 0,
  17.      observer:true,   //监听
  18.      // swiper从一个slide过渡到另一个slide时执行:停止视频播放(这里是swiper3,swiper4的写法不同)
  19.      onSlideChangeStart: function(swiper){
  20.           player.pause();
  21.      }
  22. });
  23. //视频播放时轮播图停止
  24. player.on('play',function(){
  25.      // console.log(mySwiper)
  26.      mySwiper.stopAutoplay()
  27. });
  28. // 视频暂停时轮播图继续
  29. player.on('pause',function(){
  30.      mySwiper.startAutoplay()
  31. });
复制代码
这里没有引入swiper和videojs的js和css,可自行百度。

以上就是本文的全部内容,希望对各人的学习有所帮助,也希望各人多多支持脚本之家。

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作