个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 32 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章videojs+swiper实现淘宝商品详情轮播图由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

本文实例为大家分享了videojs+swiper实现淘宝商品详情轮播图的具体代码，供大家参考，具体内容如下 。

这个引用了videojs和swiper。实现效果类似淘宝商品详情中的轮播图，首张轮播为视频： 当视频开始播放时，轮播停止。视频暂停时，轮播继续。 当视频播放中，滑动到下个slide时，视频暂停播放.

swiper手册 。

HTML部分:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- swiper轮播 -->
< div class = "swiper-container" >
    < div class = "swiper-wrapper" >
        < div class = "swiper-slide" >
            < video id = "video" style = "width: 100%;height: 100%;"  controls preload = "none" poster = "xxxx" class = "video-js vjs-big-play-centered" >
             < source src = "xxxx" type = "video/mp4" >
            </ video >
        </ div >
        < div class = "swiper-slide" >< img src = "xxxx" alt = "" ></ div >
         < div class = "swiper-slide" >< img src = "xxxx" alt = "" ></ div >
         < div class = "swiper-slide" >< img src = "xxxx" alt = "" ></ div >
         < div class = "swiper-slide" >< img src = "xxxx" alt = "" ></ div >
    </ div >
    <!-- 如果需要分页器 -->
    < div class = "swiper-pagination" ></ div >
</ div >

js部分:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//新建videojs对象
var player = videojs( 'video' , {
      muted: true ,
      controls: true ,
      // loop: true,
  });
 
  // swiper轮播
  var mySwiper = new Swiper ( '.swiper-container' , {
      direction: 'horizontal' , // 轮播图的方向，也可以是vertical方向
      loop: true ,  //循环播放
      autoplay:3000, // slide自动切换时间
      speed:2000, // slide滑动动画时间
      height: 100,
      pagination: '.swiper-pagination' ,  // 如果需要分页器，即下面的小圆点
　　　　 autoplayDisableOnInteraction : false , // 这样，即使我们滑动之后， 定时器也不会被清除
      offsetWidth: 0,
      observer: true ,   //监听
 
      // swiper从一个slide过渡到另一个slide时执行:停止视频播放（这里是swiper3，swiper4的写法不同）
      onSlideChangeStart: function (swiper){
           player.pause();
      }
  });
 
 
  //视频播放时轮播图停止
  player.on( 'play' , function (){
      // console.log(mySwiper)
      mySwiper.stopAutoplay()
  });
 
  // 视频暂停时轮播图继续
  player.on( 'pause' , function (){
      mySwiper.startAutoplay()
  });

这里没有引入swiper和videojs的js和css，可自行百度.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

原文链接：https://blog.csdn.net/weixin_42085115/article/details/90642127 。

最后此篇关于videojs+swiper实现淘宝商品详情轮播图的文章就讲到这里了,如果你想了解更多关于videojs+swiper实现淘宝商品详情轮播图的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

32 4 0
文章推荐： Vue.js之VNode的使用
文章推荐： JavaScript+HTML实现学生信息管理系统
文章推荐： DPlayer.js视频播放插件使用方法
文章推荐： 浅谈vue2的$refs在vue3组合式API中的替代方法
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com