利用jQuery實現仿淘寶主圖視頻切換代碼



27 107 36



特效描述:利用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焦點圖 flash幻燈片 flashbanner flash圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 焦點圖 幻燈片 輪播圖 bar焦點圖 圖片滑動 圖片滑塊 圖片切換 圖片選項卡 圖標選項卡 純圖片輪播 圖片輪播
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 广东快乐十分走势图快朱乐十分 北京赛车 新疆时时彩助赢软件 山西泳坛夺金最近500期 推倒胡规则怎样算胡 pk10冠军精准一期计划 在线答题赚钱是真的吗6 青鹏棋牌完整版下载 167棋牌游戏官网 中国体彩p3预测胆码 一肖两码中特吗 内蒙古时时彩一定牛 乐彩网是官方的吗 甘肃11选5近10期开奖结果 甘肃11选5官网下载 极速11选5是什么彩