layui实现动态图片/视频轮播：

---

1.效果：

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

3.文档：

https://layuion.com/demo/

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24