<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>图标</title>
<%--引入css样式--%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
</head>
<body>
<%--引入js文件--%>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>填充轮播元素 - 以图片为例</legend>
</fieldset>
<div class="layui-carousel " id="test10">
<div carousel-item="">
<div><img src="${pageContext.request.contextPath}/image/timg.jpg"></div>
<div><img src="${pageContext.request.contextPath}/image/timg1.jpg"></div>
<div><img src="${pageContext.request.contextPath}/image/timg2.jpg"></div>
<div><img src="${pageContext.request.contextPath}/image/timg3.jpg"></div>
</div>
</div>
<script>
layui.use(['carousel'], function(){
var carousel = layui.carousel
//图片轮播
carousel.render({
elem: '#test10'
,width: '778px'
,height: '440px'
,interval: 5000
});
});
</script>
</body>
</html>
样式：
class="layui-carousel
浙公网安备 33010602011771号