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;}
本站出售的源码只允许用于合法用途,以及学习交流技术层面,凡是用于非法用途的与本站无关,本人不承担任何责任!未经本站允许不得转载、倒卖克胡网络 » maccms获取文章内容中的5张图片(多图列表代码)
分享到:
赞(0)

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
Hello,欢迎来咨询~