利用jQuery实现仿淘宝主图视频切换代码



62 247 83



特效描述:利用jQuery实现 仿淘宝 主图视频 切换代码,利用jQuery实现仿淘宝主图视频切换代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

2. 引入JS

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>

3. HTML代码

<!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>
		<!-- 阿里高清方案 -->
		<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>
	</head>
	<body onLoad="load()">
		<h2 style="text-align: center">请在移动端预览,不支持pc端</h2>
		<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="img/t4.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="img/t1.jpg" alt="">
						</div>
						<div class="swiper-slide"><img src="img/t2.jpg" alt="">
						</div>
						<div class="swiper-slide"><img src="img/t3.jpg" alt="">
						</div>
						<div class="swiper-slide"><img src="img/t4.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">
function load(){
$(".video_btn").hide();
$("#slideVideo").trigger('play');
}
	$(".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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 焦点图 幻灯片 图片轮播 图片滑动 图片切换 图片轮播

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到