問題描述:要實現輪播圖,每行展示5張圖片,點擊左右可繼續展示5張。
查找技術:https://blog.csdn.net/u014042066/article/details/76906565
測試代碼:
<th:block th:each="i:${#numbers.sequence(0,9)}"> <li th:index="${i}"> <th:block th:each="k:${#numbers.sequence(0,4)}"> <div th:text="'i='+${i}"></div> <div th:text="'k='+${k}"></div> <div th:text="'jg='+${k+(i*5)}"></div> </th:block> </li> </th:block>
實現輪播代碼:
<ul class="flder"> <!-- liCount為li的數量減1,此循環為循環出li --> <th:block th:each="i:${#numbers.sequence(0,liCount)}"> <!-- 得到index,index為輪播插件需要 --> <li th:index="${i}"> <!-- 此循環為list循環,得到數據 --> <th:block th:each="k:${#numbers.sequence(0,4)}"> <!-- 判斷list大小,防止下標越界 --> <th:block th:if="${#lists.size(activityList) gt k+(i*5)}"> <div class="xsq_deal_wrapper"> <a class="saleDeal" href="" target="_blank"> <div class="dealCon"> <img class="dealImg" th:src="${fileService}+${activityList[k+(i*5)].imgUrl}" th:alt="${activityList[k+(i*5)].activityTitle}"> <div class="zt2Qrcode overlay"></div> </div> <div class="title_new"> <p class="word"><span class="baoyouText" th:text="${activityList[k+(i*5)].createTimeVo}"></span></p> </div> <div class="dealInfo"> <span class="price"><em th:text="${activityList[k+(i*5)].activityTitle}"></em></span> <span class="shop_preferential">查看詳細事跡>></span> </div> </a> </div> </th:block> </th:block> </li> </th:block> </ul>