使用layui框架写轮播图
在layui官网下载插件 https://www.layui.com/
文件中引入插件
<link rel="stylesheet" href="../js/plugins/layui-v2.5.4/layui/css/layui.css">
<script src="../js/plugins/layui-v2.5.4/layui/layui.js"></script>
HTML
<div class="layui-carousel" id="test1">
<div carousel-item>
<div><img src="../img/测试/1.jpg" /></div>
<div><img src="../img/测试/2.jpg" /></div>
<div><img src="../img/测试/3.jpg" /></div>
<div><img src="../img/测试/4.jpg" /></div>
<div><img src="../img/测试/5.jpg" /></div>
</div>
</div>
js代码
<script>
layui.use('carousel', function () {
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1'
, width: '500px' //设置容器宽度
, height: '200px' //设置容器高度
// , full:'true' //是否全屏轮播,默认false
// , arrow: 'always' //始终显示箭头和点击按钮
// ,anim: 'updown' //切换动画方式,可从各个方向滚动
});
});
</script>
其中js书写规范,严格按照layui官方文档提供的书写方法