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, ...
随机推荐
- 软工读书笔记 week 5 ——《构建之法》
本周主要对<构建之法>中的一部分进行阅读. 一.软件与软件工程究竟是什么? 本书的概论部分就指出“软件 = 程序 + 软件工程”.而我们这门课的名字就叫“现代软件工程”.其实在上课之前,我 ...
- Azure 中部署WordPress的方法
一.Azure 中创建WordPress虚拟机(1).登陆Azure:打开Azure 官网,点击右侧上方的登陆Azure门户,输入Azure帐号与密码,点击 登陆 . (2).创建Wordpress虚 ...
- oracle表名、字段名大小写问题。
oracle 表名 .字段名 默认不区分大小写,除非建表语句中带双引号 如CREATE TABLE "TableName"("ID" number). CRE ...
- SVN图标不显示的解决几种方式
系统安装的Tortoise SVN,不知道是不是安装了其他软件的缘故,造成SVN客户端功能可以正常使用,就是文件夹或文件的左下角不显示图标.故上网查找解决方法: 方法一: 升级到最新版本,基本是没用的 ...
- Mybatis学习---基础知识考核
MyBatis 2.什么是MyBatis的接口绑定,有什么好处 接口映射就是在IBatis中任意定义接口,然后把接口里面的方法和SQL语句绑定, 我们直接调用接口方法就可以,这样比起原来了Sql ...
- 沉淀再出发:用python画各种图表
沉淀再出发:用python画各种图表 一.前言 最近需要用python来做一些统计和画图,因此做一些笔记. 二.python画各种图表 2.1.使用turtle来画图 import turtle as ...
- ZT 线程处理函数pthread_cleanup_push / pthread_cleanup_pop
http://bbs.csdn.net/topics/390688105 2)创建了线程,但是线程退出时没有线程调用pthread_join() 线程资源没有回收,如果持续创建线程,到一定数量后将不能 ...
- [COGS 2065]学数数
2065. 学数数 ★★★☆ 输入文件:jxthree.in 输出文件:jxthree.out 简单对比时间限制:1 s 内存限制:256 MB [题目描述] 从前有一只咩,还有一只叽 ...
- Current urgent plan(3/30)
1. resume improving 1.1 project from Udacity 1.2 project from class 1.3 find career center's help 1. ...
- 015.2Condiction接口
Condiction对象能够让线程等待,也能够唤醒相应的线程,通过下面方法,具体看代码:await();signal();signalAll(); 使用步骤:1)创建锁2)通过锁拿到Condictio ...