swiper 视频无限自动轮播无缝轮播的实现

最新推荐文章于 2025-07-21 19:50:22 发布

我本名叫一休

最新推荐文章于 2025-07-21 19:50:22 发布

阅读量1.2w

点赞数

CC 4.0 BY-SA版权

文章标签：视频轮播视频自动轮播视频无缝轮播 swiper视频轮播

本文链接：https://blog.csdn.net/qq_36073929/article/details/79878086

本文介绍如何利用Swiper库的4.2.2版本，配置视频轮播，实现视频的无限自动无缝播放功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本案例用的swiper-4.2.2.min.js 和 swiper-4.2.2.min.css

<div class="swiper-container" id="swiper2">
					<div class="swiper-wrapper">
						<#list videoList as video>
						    <div class="swiper-slide">
							<video id="video1" src="${video.video_url}" title="${video.video_title}" style="width: 680px; height: 340px; background: #e1e1e1; cursor: pointer;"> 您的浏览器不支持 video 标签。
							</video>
						    </div>
						</#list>

					</div>
					<!-- 如果需要分页器 -->
					<div class="swiper-pagination"></div>
				</div>

	var mySwiper2 = new Swiper('#swiper2', {
			loop : true,
			speed : 2000,
			autoplay : {
				delay : 5000,
				stopOnLastSlide : false,
				disableOnInteraction : true,
			},
			pagination : '.swiper-pagination'
		})

		mySwiper2.el.onmouseover = function() { //鼠标进入
			mySwi