特效描述：利用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" pload="" 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>
下载地址
1.《jQuery仿淘宝主图视频切换代码》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《jQuery仿淘宝主图视频切换代码》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/code/focus/351.html