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文档很详细
