1.效果:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/92416f08aaf72373a6a0a529459d1f92.png)
2.代码:
<div class="ebox" id="ShiPinList"></div>
<script type="text/html" id="ShiPinListJs">
<div class="layui-carousel" id="video">
<div carousel-item style="width: 650px;height: 500px;background-color: unset;overflow: hidden;">
<% for(var i=0; i<ShiPinList.length; i++){ %>
<div style="position: relative;width: 100%;height: 100%;overflow: hidden;">
<video autoplay="autoplay" controls="controls" style="width:100%;height:100%;overflow: hidden;">
<source src="<%= ShiPinList[i] %>" type="video/mp4"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
当前浏览器不支持 video直接播放,点击这里下载视频: <a href="myvideo.webm">下载视频</a>
</video>
<h2 style="position: absolute;bottom: 15%;left: 5%;z-index: 9;">视频<%= [i]*1 +1 %>/<%= ShiPinList.length %> </h2>
</div>
<%} %>
</div>
</div>
</script>
<script>
....
var ShiPinListJs = document.getElementById('ShiPinListJs').innerHTML;
document.getElementById('ShiPinList').innerHTML = template(ShiPinListJs, {
ShiPinList: res.data.videoList //res.data.videoList:后台数据
});
layui.use(['carousel'], function () {
var carousel = layui.carousel
carousel.render({
elem: '#video',
width: '100%',
height: '100%'
});
})
</script>
3.文档:
https://layuion.com/demo/
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/eec989411370913f477f2add2cda28f5.png)
<div class="layui-carousel" id="test1">
<div carousel-item>
<div><p class="demo-carousel">在这里,你将以最直观的形式体验 layui!</p></div>
<div><p class="layui-bg-red demo-carousel">在编辑器中可以执行 layui 相关的一切代码</p></div>
<div><p class="layui-bg-green demo-carousel">你也可以点击左侧导航针对性地试验我们提供的示例</p></div>
<div><p class="layui-bg-blue demo-carousel">如果最左侧的导航的高度超出了你的屏幕</p></div>
<div><p class="demo-carousel">你可以将鼠标移入导航区域,然后滑动鼠标滚轮即可</p></div>
</div>
</div>
<script>
layui.use(function(){
var carousel = layui.carousel; //轮播
// 执行一个轮播实例
carousel.render({
elem: '#test1'
,width: '100%' //设置容器宽度
,height: 200
,arrow: 'none' //不显示箭头
,anim: 'fade' //切换动画方式
});
});
</script>