swiper 仿淘宝详情页面 视频图片切换
1、好兄弟，看一下是否是你需要的
2、废话不多说 直接上代码，复制粘贴一下 自己引用一下swiper.js和css 然后就可以开始玩儿了
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="swiper.min.css" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="swiper.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 阿里高清方案 -->
<script>
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
};
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
font-family: " Microsoft YaHei";
position: relative;
font-size: 14px;
margin: 0;
} a {
text-decoration: none;
outline: none;
-webkit-tap-highlight-color: transparent;
} .header {
position: fixed;
width: 100%;
height: 0.45rem;
z-index: 99;
} .header .back {
position: absolute;
top: 0.06rem;
left: 0.1rem;
z-index: 9;
width: 0.3rem;
height: 0.3rem;
font-size: 0.14rem;
line-height: 0.3rem;
text-align: center;
border-radius: 0.15rem;
background: rgba(0, 0, 0, 0.3);
color: rgb(255, 255, 255);
display: none;
} .header>div {
width: 100%;
background: #fff;
opacity: 0;
} .headertitle {
width: 50%;
height: 0.45rem;
line-height: 0.45rem;
margin: auto;
display: flex;
justify-content: space-between;
/*display: inline-block;*/
} .headertitle a {
width: 0.5rem;
height: calc(100% - 0.03rem);
text-align: center;
display: inline-block;
cursor: pointer;
border-bottom: 0.03rem solid transparent;
box-sizing: border-box;
} .headertitle a.active {
border-bottom: 0.03rem solid #FC3F78;
} .case .swiper-slide img {
width: 100%;
height: 100%;
} .swiper-container {
width: 100%;
height: 3.57rem;
} .tit-lunbo {
width: 2.31rem;
height: .272rem;
box-sizing: border-box;
padding-left: 5%;
background: #606060;
/*position: absolute;*/
border-radius: 17.5px;
opacity: 0.5;
margin-left: 0.1rem;
} .banner {
height: .22rem;
line-height: .22rem;
} .carousel {
margin-bottom: .13rem;
width: 100%;
height: 3.57rem;
position: relative;
} .sc-text {
color: #666666;
font-size: 0.1rem;
} .swiper-pagination-bullet {
background: none;
opacity: 1;
border: 1px solid #FF4C81;
} .swiper-pagination-bullet-active {
background: #FF4C81;
}
/*视频*/ .swiper-slideVideo {
width: 100%;
height: 100%;
position: relative;
} .video_btn {
width: 0.6rem;
height: 0.6rem;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
} .video_btn>img {
width: 100%;
height: 100%;
} .swiper-slideVideo>video {
width: 100%;
height: 100%;
}
/*图片/视频切换*/ .vAndi {
width: 1rem;
height: 0.2rem;
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: 0.11rem;
z-index: 9999;
display: none;
} .vAndiCont {
width: 1rem;
height: 0.2rem;
display: flex;
align-items: center;
justify-content: space-between;
} .vAndiCont>div {
width: 0.42rem;
height: 0.2rem;
border-radius: 0.1rem;
line-height: 0.2rem;
background: #fff;
color: #444444;
font-size: 0.09rem;
text-align: center;
} .videoBtn:before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-left: 0.07rem solid #444444;
border-top: 0.035rem solid transparent;
border-bottom: 0.035rem solid transparent;
} .videoBtn.SWactive:before {
border-left: 0.07rem solid #fff;
border-top: 0.035rem solid transparent;
border-bottom: 0.035rem solid transparent;
} .videoBtn.SWactive {
background: #FE3F47;
color: #fff;
} .imgBtn.SWactive {
background: #FE3F47;
color: #fff;
} .carousel .swiper-pagination {
font-size: 0.2rem;
} .carousel .swiper-pagination-custom {
position: static !important;
display: inline-block;
background: #000;
float: right;
color: white;
width: 0.40rem;
height: 0.20rem;
opacity: 0.5;
line-height: 0.20rem;
margin-bottom: 0.10rem;
font-size: 12px;
border-radius: 0.1rem;
margin-right: 0.109rem;
} body .rushtobuy {
/*position: absolute;*/
width: 100%;
height: 0.41rem;
background: url(../images/taoqianggou.png)0% 0% / 100% no-repeat;
/*background-size:100% 100%*/
color: #FFFFFF;
font-size: 0.2rem;
/*z-index: 10;*/
/*margin-top: 10px;*/
} body #rushtobuyjhs {
background: url(../images/juhuasuan.png)0% 0% / 100% no-repeat;
} body .rushtobuy>p:nth-of-type(1) {
line-height: 0.41rem;
margin-left: 0.045rem;
display: inline-block;
} body .rushtobuy>p:nth-of-type(2) {
line-height: 0.41rem;
font-size: 0.1rem;
margin-left: 0.081rem;
text-decoration: line-through;
display: inline-block;
vertical-align: top;
} .weizhi {
position: absolute;
bottom: 0;
z-index: 10;
width: 100%;
display: none;
} #count-time {
font-size: 0.1rem;
float: right !important;
display: block;
width: 0.854rem;
height: 100%;
/*margin-right: 0.11rem;*/
} #count-time .distance {
font-family: PingFangSC-Regular;
font-size: 0.1rem;
color: #F91646;
margin-left: 0.091rem;
margin-top: 0.03rem;
} #test span {
/*vertical-align: top;*/
display: inline-block;
width: 0.145rem;
height: 0.145rem;
line-height: 0.145rem;
background: #5C3410;
color: white;
margin-left: 0.01rem;
margin-right: 0.01rem;
text-align: center;
border-radius: 0.02rem;
} #test .loadtime {
margin-top: 0.04rem;
color: #5C3410;
} .tqgorjhs {
background: #f4f4f4;
} #tqgxq {
width: 100%;
height: 0.41rem;
background: url(../images/tqgxq.png)0% 0% / 100% no-repeat;
margin-top: 0.054rem;
margin-bottom: 0.02rem;
} #jhsxq {
width: 100%;
height: 0.41rem;
background: url(../images/jhsxq.png)0% 0% / 100% no-repeat;
margin-top: 0.054rem;
margin-bottom: 0.02rem;
} .line-top {
background: #F4F4F4;
width: 100%;
height: 0.044rem;
} .line-top {
background: #F4F4F4;
width: 100%;
height: 0.02rem;
} #test .testendtime {
width: 100%;
color: #F91646;
height: 100%;
line-height: 0.41rem;
text-align: center;
} .go_down {
font-size: 0.15rem;
width: 100%;
height: 0.46rem;
background: rgba(0, 0, 0, 0.3);
color: white;
line-height: 0.46rem;
padding: 0 0.09rem;
position: absolute;
top: 0;
z-index: 2;
} .go_down_btn {
width: 0.68rem;
display: inline-block;
height: 0.32rem;
background: #FF4C81;
color: 0.14rem;
position: absolute;
top: 0.07rem;
right: 0.16rem;
z-index: 3;
line-height: 0.32rem;
text-align: center;
border-radius: 0.04rem;
cursor: pointer;
} .lib-video {
position: absolute;
top: 0;
height: 100%;
width: 100%;
z-index: 2;
} .qiege {
width: 100%;
height: 0.2rem;
background: #eee;
}
/*店铺信息*/ .shopinfo {
width: 100%;
height: 1.1rem;
background: #fff;
padding-top: 0.15rem;
} .infotop {
padding: 0 0.14rem;
display: flex;
align-items: center;
justify-content: space-between;
height: 0.45rem;
margin-bottom: 0.15rem;
} .top_left {
display: flex;
align-items: center;
} .infobot {
display: flex;
padding: 0 0.14rem;
justify-content: space-between;
color: #999999;
font-size: 0.12rem;
} .miaoshured {
color: #FF5001;
font-size: 0.14rem;
margin: 0 0.05rem;
} .shoppf {
display: inline-block;
width: 0.15rem;
height: 0.15rem;
} .top_img {
width: 0.5rem;
margin-right: 0.09rem;
height: 0.5rem;
} .top_img img {
width: 100%;
height: 100%;
} .top_name p {
color: #000000;
font-size: 0.13rem;
} .top_name .tm {
margin-top: 0.04rem;
} .top_right {
color: #A0A0A0;
font-size: 0.1rem;
}
/*相似推荐*/ .xiangsiwrap {
width: 100%;
height: 2rem;
background: #fff;
padding: 0.13rem 0.11rem 0;
} .xiangsiwrap div {
width: 100%;
height: 100%;
} .xiangsiwrap .swiper-slide {
width: 1.1433rem !important;
margin: 0 0.01667rem;
} .xiangsiwrap .swiper-slide .xsname {
padding: 0 0.02rem;
margin: 0.04rem 0;
height: 0.14rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
} .xiangsiwrap .swiper-slide .xsquanjin {
height: 0.14rem;
padding: 0 0.02rem;
color: #F13B3A;
margin: 0.04rem 0 0.06rem 0;
font-size: 0.09rem;
} .xiangsiwrap .swiper-slide .xsquan {
padding: 0 0.02rem;
color: #F13B3A;
font-size: 0.09rem;
} .xiangsiwrap .swiper-slide img {
width: 100%;
height: 1rem;
display: inline-block;
border-radius: 0.05rem;
}
/*看了又看*/ .kanheader {
width: 100%;
height: 0.4rem;
line-height: 0.4rem;
background: #fff;
padding: 0 0.14rem;
font-size: 0.16rem;
border-bottom: 1px solid #eee;
} .kanwrapper {
display: flex;
/*align-content: space-between;*/
justify-content: space-between;
flex-wrap: wrap;
background: #eee;
} .kanwrapper .kanpro {
width: 1.85rem;
height: 2.32rem;
background: #fff;
margin-bottom: 0.05rem;
} .kanpro .pro_img {
width: 1.85rem;
height: 1.85rem;
} .kanpro .pro_img img {
width: 100%;
height: 100%;
} .kanpro .pro_top,
.pro_bot {
display: flex;
padding: 0 0.04rem 0 0.07rem;
justify-content: space-between;
} .kanpro .pro_top {
margin: 0.02rem 0 0.09rem 0;
color: #9A9A9A;
font-size: 0.10rem;
} .kanpro .pro_bot {
color: #F13B3A;
font-size: 0.10rem;
} .kanpro .pro_bot .quanhou {
font-size: 0.16rem;
} .coverback {
display: none;
position: fixed;
width: 2rem;
height: 1rem;
background: #fff;
border-radius: 5px;
/*border: 1px solid gray;*/
z-index: 1000;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
} .coverback .backtitle {
border-bottom: 1px solid #f4f4f4;
padding: 0.12rem;
line-height: 0.2rem;
} .coverback .goback {
display: inline-block;
width: 100%;
height: 0.3rem;
line-height: 0.3rem;
text-align: center;
/*color: #000;*/
} </style>
</head> <body>
<div id="wrapper"> <div class="header">
<a href="appfun:productdetail:pop" class="back iconfont icon-arrow-left "></a>
<a href="rule.html" class="rules iconfont icon-arrow-right "></a>
</div>
<!--轮播-->
<div class="carousel">
<div class="swiper-container case">
<div class="swiper-wrapper bsd load-div">
<div class="swiper-slide">
<div class="swiper-slideVideo">
<video src="https://cloud.video.taobao.com/play/u/1699136323/p/2/e/6/t/1/50119750594.mp4?appKey=38829" id="slideVideo" webkit-playsinline="true" playsinline="true" width="100%" height="100%" type="video/mp4" preload="" x-webkit-airplay="true" x5-playsinline="true" poster="https://img.alicdn.com/i1/1699136323/O1CN01Rv0Rk91wZypQKwRH0_!!1699136323.jpg" x-webkit-airplay="true">
<source type="video/mp4" src="https://cloud.video.taobao.com/play/u/1699136323/p/2/e/6/t/1/50119750594.mp4?appKey=38829">
</video>
<div class="video_btn">
<img src="./playerBtn.png" />
</div>
</div>
</div>
<div class="swiper-slide"><img src="https://img.alicdn.com/i1/1699136323/O1CN01Rv0Rk91wZypQKwRH0_!!1699136323.jpg" alt="">
</div>
<div class="swiper-slide"><img src="https://img.alicdn.com/i1/1699136323/O1CN015JtrrY1wZyohly2Wi_!!1699136323.jpg" alt="">
</div>
<div class="swiper-slide"><img src="https://img.alicdn.com/i2/1699136323/O1CN01ZYvfAc1wZyoqp26ZU_!!1699136323.jpg" alt="">
</div>
<div class="swiper-slide"><img src="https://img.alicdn.com/i1/1699136323/O1CN01FfmkjV1wZyoh5C9rT_!!1699136323.jpg" alt="">
</div>
</div>
<!--视频/图片按钮-->
<div class="vAndi">
<div class="vAndiCont">
<div class="videoBtn SWactive">
视频
</div>
<div class="imgBtn">
图片
</div>
</div>
</div>
<div class="weizhi">
<!--分页-->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
</body> </html>
<script type="text/javascript">
$(".video_btn").on("click", function() {
$("#slideVideo").trigger('play');
$(".video_btn").hide();
return false;
})
$(".swiper-slideVideo").on("click", function() {
$("#slideVideo").trigger('pause');
$(".video_btn").show();
})
$("#slideVideo").on("ended", function() {
$(".video_btn").show();
})
$(".vAndi").show();
$(".videoBtn").on("click", function() {
$(".videoBtn").addClass("SWactive");
$(".imgBtn").removeClass("SWactive");
swiper1.slideTo(0, 1000, false);
$(".weizhi").hide();
return false;
})
$(".imgBtn").on("click", function() {
$(".imgBtn").addClass("SWactive");
$(".videoBtn").removeClass("SWactive");
swiper1.slideTo(1, 1000, false);
$("#slideVideo").trigger('pause');
$(".video_btn").show();
$(".weizhi").show();
return false;
})
var swiper1 = new Swiper('.case', {
pagination: '.swiper-pagination',
paginationType: 'custom',
//修改显示数量的下标
paginationCustomRender: function(swiper, current, total) {
var current1 = current - 1;
var total1 = total - 1;
return current1 + ' / ' + total1;
},
paginationClickable: true,
// loop: true, updateOnImagesReady: true,
// autoplay : 3000,
lazyLoading: true,
lazyLoadingInPrevNext: true,
lazyLoadingInPrevNextAmount: 2,
onSlideChangeStart: function(swiper) {
var sliderIndex = swiper.activeIndex;
$("#slideVideo").trigger('pause');
$(".video_btn").show();
if(sliderIndex == 0) {
$(".videoBtn").addClass("SWactive");
$(".imgBtn").removeClass("SWactive");
$(".weizhi").hide();
} else {
$(".imgBtn").addClass("SWactive");
$(".videoBtn").removeClass("SWactive");
$(".weizhi").show();
}
}
});
</script>
3、写的有点乱 但是很好用 swiper相关属性就不介绍了 自己看Api文档很详细
swiper 仿淘宝详情页面 视频图片切换的更多相关文章
- JS仿淘宝详情页菜单条智能定位效果
类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...
- 仿淘宝详情转场（iOS，安卓没有这功能）
由于公司是做跨境电商的,所以对各大电商APP都有关注,最近看到淘宝iOS端(安卓没有)在商品详情点击加入购物车有一个动画效果特别赞,正好今天新版本上线,下午就抽了些时间研究了下. 主要思路是自定义转场 ...
- vue实现仿淘宝结账页面
这个demo,是小颖基于之前的 vue2.0在table中实现全选和反选 文章进行更新后的demo,主要功能呢,是仿照淘宝页面的结算购物车商品时自动算出合计价格的页面,具体页面效果请看下面的动图: ...
- JQuery仿淘宝滚动加载图片
用 JQuery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第 ...
- jquery仿淘宝购物车页面商品结算（附源码）
1.效果图如下: 2.源码如下: html部分: <!doctype html> <html lang="en"> <head> <met ...
- vue仿淘宝订单状态的tab切换效果
<div class="navigation"> //这里是通过循环遍历出来的数据,你需要根据index的值来判断你现在点击的是第几个tab栏导航,同时在js中写一个 ...
- 转：：iOS 仿淘宝,上拉进入详情页面
今天做的主要是一个模仿淘宝,上拉进入商品详情的功能,主要是通过 tableView 与 webView 一起来实现的,当然也可根据自己的需要把 webView 替换成你想要的 // // ViewCo ...
- Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片
Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...
- 高仿淘宝和聚美优品商城详情页实现《IT蓝豹》
高仿淘宝和聚美优品商城详情页实现 android-vertical-slide-view高仿淘宝和聚美优品商城详情页实现,在商品详情页,向上拖动时,可以加载下一页. 使用ViewDragHelper, ...
随机推荐
- IOC和AOP的个人理解
IOC,依赖倒置的意思,所谓依赖,从程序的角度看,就是比如A要调用B的方法,那么A就依赖于B,反正A要用到B,则A依赖于B. 所谓倒置,你必须理解如果不倒置,会怎么着,因为A必须要有B,才可以调用B, ...
- Servlet映射规范和隐式映射
问题描述: web.xml中配置了缺省路径"/"后,原先在webapp下的静态页面(html)无法通过URL访问了,为什么? 过程尝试: 1. 将html后缀改为.jsp后可以正常 ...
- 毕向东_Java基础视频教程第20天_IO流（11~14）
第20天-11-IO流(Properties简述) .properties是一种主要在Java相关技术中用来存储应用程序的可配置参数的文件的文件扩展名.它们也可以存储用于国际化和本地化的字符串,这种文 ...
- mssql修改id
alter table image alter column id int IDENTITY (1, 1) NOT NULL 我只能上查询分析器,所以只 ...
- --Too small initial heap for new size specified
虽然Java屏蔽了一下内存细节,但是有时候,了解一下这些常识还是有好处的,特别是一些面试,总是盯着这些玩意不放手. JVM启动以后,会分配两类内存区域,一类用于开发人员使用,比如保存一些变量,对象等, ...
- 进程间通信——队列和管道（multiprocess.Queue、multiprocess.Pipe）
进程: 之前我们已经了解了操作系统中进程的概念,程序并不能单独运行,只有将程序装载到内存中,系统为它分配资源才能运行,而这种执行的程序就称之为进程.程序和进程的区别就在于:程序是指令的集合,它是进程运 ...
- C++ Primer(6) 模板和泛型编程(上)
问题聚焦: 泛型编程是独立于变量类型的方式编写代码: 模板是泛型编程的基础. 本篇主要介绍模板的基础知识,包括:模板的定义和模板的实例化. 1 模版定义 必要性: Demo int compare(c ...
- Python学习---装饰器的学习1210
装饰器的基础 学习前提: 作用域 + 函数的理解 + 闭包 [学习,理解] 代码编写原则: 对修改开放对扩展开放 装饰器本质上是一个函数,该函数用来处理其他函数,它可以让其他函数在不需要修改代码的前 ...
- NJCTF2017 web getflag（详解）
题目: url:http://218.2.197.235:23725/ writeup: 首先随便输入后查看源码: <imgsrc="data:image/png;base64,Y2F ...
- php懈垢windows通用上传缺陷
#1 实例介绍本案例采用的实例是:U-Mail邮件系统.U-Mail邮件系统文件上传的地方代码是这样的: code 区域 <?php if(ACTION =="attach-uploa ...