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

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

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

swiper手册

HTML部分：

<!-- 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部分：

//新建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，可自行百度。

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

赞 (0)

相关推荐

  • javascript实现商品图片放大镜

    javascript实现商品图片放大镜

    优化原因 现在的电商商城项目解决的主要是购买商品的问题,那么购买商品主要要看清楚商品表面外形的主要特征和细节,如果图片处理过小,或者细节过于模糊,就需要做一个商品高清图片放大局部的功能. 技术关键点 1.左侧和上侧距离,在一个水平位置和垂直位置中有我们可以挪动的区域,就是原图片区域,鼠标挪动位置是一个块状位置,他的左侧和上侧距离浏览器上侧和左侧分别有一个长度,我们叫它们 ClientX 和 ClientY,而左上侧鼠标没有略过的位置实际上是一个点,我们拖动放大块时,它会由一个点变成一个方块,这个

  • JavaScript实现淘宝商品图切换效果

    JavaScript实现淘宝商品图切换效果

    JavaScript之衣服相册切换效果(类似淘宝商品图切换),供大家参考,具体内容如下 话不多说,直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #bigImg{ width: 200

  • JavaScript实现电商平台商品细节图

    JavaScript实现电商平台商品细节图

    本文分享一个电商平台常见查看商品细节图案例,如某东网站手机类别中具体某一部手机详情页中,手机的细节图展示,左侧小图获得用户鼠标焦点即可在屏幕右侧展示出该图片区域的大图效果,其中JS部分主要涉及鼠标经过.鼠标离开.鼠标移动等事件以及含有一个小算法公式,先展示效果: 某电商平台效果图展示: 本案例代码部分: HTML结构: <div class="box"> <img src="images/s3.png" alt=""> &

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

    本文实例为大家分享了videojs+swiper实现淘宝商品详情轮播图的具体代码,供大家参考,具体内容如下 这个引用了videojs和swiper.实现效果类似淘宝商品详情中的轮播图,首张轮播为视频: 当视频开始播放时,轮播停止.视频暂停时,轮播继续. 当视频播放中,滑动到下个slide时,视频暂停播放. swiper手册 HTML部分: <!-- swiper轮播 --> <div class="swiper-container"> <div class

  • Android仿淘宝商品详情页效果

    Android仿淘宝商品详情页效果

    本文实例为大家分享了Android仿淘宝商品详情页的具体代码,供大家参考,具体内容如下 Demo地址:先上效果图 效果就是上面图片的效果 接下来看看如何实现 首先我们来看下布局文件 <LinearLayout android:id="@+id/header" android:layout_width="match_parent" android:layout_height="72dp" android:paddingTop="24

  • Android仿淘宝商品详情页

    Android仿淘宝商品详情页

    看到有人在问如何实现淘宝商品详情页效果,献上效果图 大致梳理一下思路,这里不提供源码 状态栏透明使用开源库StatusBarCompat,为了兼容手机4.4 dependencies { compile ('com.github.niorgai:StatusBarCompat:2.1.4', { exclude group: 'com.android.support' }) } allprojects { repositories { ... maven { url "https://jitpa

  • Swiper.js插件超简单实现轮播图

    Swiper.js插件超简单实现轮播图

    Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果.超好用 话不多说,直接上教程 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件.可下载Swiper文件或使用CDN. <!-- Link Swiper--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com

  • Swiper如何实现两行四列轮播图效果实例

    Swiper如何实现两行四列轮播图效果实例

    目录 案例效果 基本样式 所需文件 循环遍历 总结 案例效果 基本样式 .icons{ width:100%; overflow: hidden; } .icons-item{ width: 25%; height: 0; padding-bottom: 25%; float: left; } .icons-item img{ width: 1.1rem; height: 1.1rem; display: block; margin: 0 auto; padding-top: .2rem; }

  • python爬取淘宝商品详情页数据

    python爬取淘宝商品详情页数据

    在讲爬取淘宝详情页数据之前,先来介绍一款 Chrome 插件:Toggle JavaScript (它可以选择让网页是否显示 js 动态加载的内容),如下图所示: 当这个插件处于关闭状态时,待爬取的页面显示的数据如下: 当这个插件处于打开状态时,待爬取的页面显示的数据如下:   可以看到,页面上很多数据都不显示了,比如商品价格变成了划线价格,而且累计评论也变成了0,说明这些数据都是动态加载的,以下演示真实价格的找法(评论内容找法类似),首先检查页面元素,然后点击Network选项卡,刷新页面,可

  • Android自定义ViewGroup实现淘宝商品详情页

    Android自定义ViewGroup实现淘宝商品详情页

    最近公司在新版本上有一个需要,要在首页添加一个滑动效果,具体就是仿照X宝的商品详情页,拉到页面底部时有一个粘滞效果,如下图X东的商品详情页,如果用户继续向上拉的话就进入商品图文描述界面: 刚开始是想拿来主义,直接从网上找个现成的demo来用, 但是网上无一例外的答案都特别统一: 几乎全部是ScrollView中再套两个ScrollView,或者是一个LinearLayout中套两个ScrollView. 通过指定父view和子view的focus来切换滑动的处理界面---即通过view的requ

  • Android仿一号店货物详情轮播图动画效果

    还不是很完全,目前只能点中间图片才能位移,图片外的其他区域没有..(属性动画),对了,图片加载用得是facebook的一款android图片加载库,感觉非常NB啊,完爆一切. 1.先看布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t

  • python爬虫爬取淘宝商品信息（selenum+phontomjs）

    python爬虫爬取淘宝商品信息（selenum+phontomjs）

    本文实例为大家分享了python爬虫爬取淘宝商品的具体代码,供大家参考,具体内容如下 1.需求目标 : 进去淘宝页面,搜索耐克关键词,抓取 商品的标题,链接,价格,城市,旺旺号,付款人数,进去第二层,抓取商品的销售量,款号等. 2.结果展示 3.源代码 # encoding: utf-8 import sys reload(sys) sys.setdefaultencoding('utf-8') import time import pandas as pd time1=time.time()

  • 微信小程序实现Swiper轮播图效果

    微信小程序实现Swiper轮播图效果

    本文实例为大家分享了微信小程序轮播图的具体代码,供大家参考,具体内容如下 1.逻辑层 mine.js // pages/mine/mine.js Page({ /** * 页面的初始数据 */ data: { /*轮播图 配置*/ imgUrls: [ 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_s

随机推荐