Layui实现轮播图功能:

Sun Peng

已于 2022-10-12 08:31:29 修改

阅读量775

点赞数

分类专栏： JavaScript 文章标签： layui 前端 javascript

于 2022-08-25 19:47:24 首次发布

本文链接：https://blog.csdn.net/weixin_53791978/article/details/126531042

版权

JavaScript 专栏收录该内容

66 篇文章 1 订阅

订阅专栏

1.思路:

官网:

官网有相关案例,但是在使用过程中会出现:动态加载成功,但是没有效果的问题

在这里插入图片描述

2.解决:

先加载数据,再加载轮播
在这里插入图片描述

3.最终效果:

<div class="rower2" style="display: block;">
	<div class="guobangxiangqin_imgs" id="guobangxiangqinImgList"></div>
</div>

<script type="text/html" id="guobangxiangqinImgListJs">
	<div class="layui-carousel" id="test1" lay-filter="test1" style="width: 490px;height: 480px;">
		<div carousel-item="" style="width: 490px;height: 480px;">
			<% for(var i=0; i<guobangxiangqinImgList.length; i++){ %>
				<div style="width: 490px;height: 480px;">
				   <img style="height:100%; width:auto;margin: 0 auto;" src="<%= guobangxiangqinImgList[i].url %>" alt="<%= [i]*1 +1 %>">
				   <h2>图片<%= [i]*1 +1 %>/<%= guobangxiangqinImgList.length %> </h2>
				</div>
			<%} %>
		</div>
	</div> 
</script>