maccms获取文章内容中的5张图片(多图列表代码)

以前v8的时候我就做过类似的案例

v8的方法:

  1. {maccms:art num=20 pagesize=12 type=all start=1 order=desc by=time }
  2. <section class="has_action">
  3. <div class="item_detail">
  4. <h3 class="dotdot line3">[art:name]</h3>
  5. <div class="list_image detail[art:num]" >
  6. [art:content]
  7. </div>
  8. <script type="text/javascript"><!-- 关键就在这段jq代码 -->
  9. $(".detail[art:num]").html($(".detail[art:num] img"));$(".detail[art:num] img:gt(3)").remove();</script>
  10. <div class="item_info">
  11. <div> [art:hits] <span class="src space">[art:from]</span>
  12. <span class="cmt space">作者: [art:author]363
  13. <!-- /react-text --></span>
  14. <span class="time" title="[art:addtime]"> [art:addtime]</span>
  15. <span class="dislike-news fr"></span>
  16. </div>
  17. </div>
  18. </div>
  19. </section>
  20. {/maccms:art}

jq代码的用意:这里 直接使用了 [art:content]内容标签,删除class="detail+序号" 的所有HTML标签和文本数据只保留img 标签,再删除第四个img标签以后的内容。然后就只剩下 三个img 标签了,最后使用css设置样式。

控制图片的css代码:

  1. .list_image{height: 100px; width: 100%; overflow: hidden;}
  2. .list_image img{width: 30%;height: 100px;margin-left: 5px;}
文章由官网发布,如若转载,请注明出处:https://www.veimoz.com/539
0 评论
3.1k

发表评论

!