焦点图制作说明

首先我们来了解一个标签

• focusPictureTag
  

他返回一个图片的数组:[image,image]

image的基本属性为：

{
"pic_url": "http://xxx.com/1.jpg",
"operation_url": "http://www.baidu.com" 
}

• pic_url 图片url
• operation_url :点击图片的连接

制作思路

1. 循环image数组
2. 形成轮播的基础dom结构
3. 组织样式及Javascript实现最终效果

示例

<#assign FocusPictureTag = newTag( "focusPictureTag") />
<#assign advList = FocusPictureTag( "'client_type':'pc'")! '' />
<div class="swiper-container swiper-container-index-banner" style="height: 500px;">
    <div class="swiper-wrapper">
        <#if advList?exists && advList?size gt 0>
            <#list advList as _adv>
                <div class="swiper-slide">
                    <a href="${_adv.operation_url!''}" target="_blank">
                        <img class="lazy" src="" data-original='<@imgurl pic="${_adv.pic_url!''}"/>' style="width: 100%; height: 100%">
                    </a>
                </div>
            </#list>
        </#if>
    </div>
    <div class="swiper-pagination swiper-pagination-index-banner"></div>
</div>