swiper 仿淘宝详情页面视频图片切换

淡淡的烟草味﹌ 2022-01-06 15:39 297阅读 0赞

1、好兄弟，看一下是否是你需要的

![1483133-20190314161343916-2145758892.png][]

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

转载于:https://www.cnblogs.com/wangfugui/p/10531078.html

[1483133-20190314161343916-2145758892.png]: /images/20211227/f7c7b3892a2545caa03e148f68fffab3.png