发表日期:2024-03-24 文章作者:爱永设计 浏览次数:59474 次
今天在做网站开发时,客户想实现这么一个效果:在视频切换时,让当前的视频自动播放,其他视频加到初始状态。
在经过不过的实践和研究,最终实现了这个效果,分享一下代码,或许对大家有帮助
html代码如下:
<div class=”ywvideolist”>
<div class=”swiper-wrapper”>
<div class=”swiper-slide”><video class=”elementor-video” src=”视频地址” loop=”” preload=”metadata” muted=”muted” controlslist=”nodownload” poster=”封面图”></video></div>
<div class=”swiper-slide”><video class=”elementor-video” src=”视频地址” loop=”” preload=”metadata” muted=”muted” controlslist=”nodownload” poster=”封面图”></video></div>
<div class=”swiper-slide”><video class=”elementor-video” src=”视频地址” loop=”” preload=”metadata” muted=”muted” controlslist=”nodownload” poster=”封面图”></video></div>
</div>
</div>
Swiper代码如下:
if($(“.ywvideolist”).length > 0){
var ywvideolist = new Swiper(‘.ywvideolist’, {
loop: true,
initialSlide: 0,
spaceBetween: 16,
slidesPerView: “auto”,
speed: 800,
centeredSlides: true,
observer: !1,
observeParents: !0,
navigation: {
prevEl: ‘.ywvideobtnprve’,
nextEl: ‘.ywvideobtnnext’,
},
on: {
slideChangeTransitionStart: function() {
videoautoplay()
},
slideChange: function() {
videoautoplay();
},
}
});
}
js代码如下:
function videoautoplay(){
var videoitem = $(‘.ywvideolist .swiper-slide’);
videoitem.each(function(){
if( $(this).hasClass(‘swiper-slide-active’) ){
$(this).find(‘video’)[0].play();
}else{
$(this).find(‘video’)[0].load();
}
})
}
实现的效果如下图:
日期:2020-03-06 浏览次数:262350 次
日期:2018-07-07 浏览次数:334218 次
日期:2017-08-20 浏览次数:334567 次
日期:2016-09-09 浏览次数:334934 次
日期:2016-01-20 浏览次数:284755 次
开发日期:2021-06-21 浏览次数:699099 次
开发日期:2021-04-21 浏览次数:759299 次
开发日期:2020-05-03 浏览次数:816783 次
开发日期:2019-12-02 浏览次数:794407 次
开发日期:2019-10-02 浏览次数:1053848 次
日期:2018-03-09 浏览次数:21317 次
日期:2012-11-03 浏览次数:29262 次
日期:2016-04-15 浏览次数:14773 次
日期:2012-06-11 浏览次数:17025 次
日期:2021-04-21 浏览次数:9407 次
致力于互联网品牌建设与网络营销,专业领域包括网站建设、网站模板、移动互联网营销、wordpress平台开发等,服务范围涵盖基础的域名服务、主机 服务;企业邮箱、云服务器、网络营销等应用服务,为不同类型的客户提供良好的互联网应用定制解决方案,帮助客户在新的全球化互联网环境中保持优势。
爱永设计工作室一直致力于品牌精美的网页设计、网页制作DIV+CSS布局、JS效果、精美网站模板、标志设计、专业仿站, 低廉的价格,真诚的服务,我们拥有全国各地的客户群体和各行业的成功案例。以一流的服务,出色的网页设计和制作能力,认真严谨的工作态度为客户提供优质满意的服务。期待与您的合作!
Copyright © 2012 - 2024 aysheji.com All Rights Reserved 爱永设计 版权所有
邮箱:aysheji@163.com 在线客服:276583799 模板演示地址:www.aymoban.com 备案号:京ICP备13060102号-3
服务内容: 网页设计 网站建设 网站制作 网站模板 婚庆网站模板 摄影网站 手机网站制作 自适应网站制作