Vv

VJuly 22, 2020

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

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

v8的方法:

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

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

控制图片的css代码:

.list_image{height: 100px; width: 100%; overflow: hidden;}
.list_image img{width: 30%;height: 100px;margin-left: 5px;}
本文来自投稿,不代表本站立场,如若转载,请注明出处:https://www.dpaoz.com/539
133

发表评论

嘿,我来帮您!

VIP · 会员全站通免费下载

1,全站任意主题资源免费下载

2,专属客服一对一服务

3,积分规则:点击查看