pc的html页面，使用swiper轮播视频+图片的小demo
<html>
<head>
<meta charset="UTF-8">
<title>Swiper视频+图片轮播demo</title>
<script src="./js/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="./css/swiper.min.css">
<script src="./js/swiper.min.js"></script>
</head>
<style>
body{text-align:center;}
#content{width:600px;height:250px;margin:auto;border:1px solid #ddd;}
/*轮播图片样式*/
.swiper-slide img,video{width:100%;height:100%;}
</style>
<body>
<h2>Swiper视频+图片轮播demo</h2>
<div id="content">
<div class="swiper-container">
<div class="swiper-wrapper">
<!--图片1-->
<div class="swiper-slide">
<img src="./image/test1.jpg" alt=""/>
</div>
<!--视频-->
<div class="swiper-slide">
<video controls="controls" src="./image/test.mp4" poster="" preload="auto">
<source src="./image/test.mp4" type="video/mp4">
</video>
</div>
<!--图片2-->
<div class="swiper-slide">
<img src="./image/test2.jpg" alt=""/>
</div>
</div>
<!--左右点击图标，可不要-->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</body>
<script>
//只做简单设置，具体的自动播放设置和视频播放监控等可网上查具体代码
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 0,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
);
</script>
</html>
