建站

PC端关联营销轮播样式001

陈雷 · 7月11日 · 2019年 · · ·

今天要换店铺关联营销,做么了一个轮播形式的。亲测天猫店铺可用,不用购买主题、不用购买权限。

觉着这种轮播占用空间小,存放产品多,避免了客户看详情下拉几屏幕都看不到详情,然后离开。

<div style="width:790px;height:600px;background:#fff;"> 
   <div data-widget-config="{'contentCls':'macontent','navCls':'ma_na','duration':1,'interval':4,'autoplay':true,'triggerType':'mouse','circular':true,'effect':'scrollx','easing':'easeOutStrong','prevBtnCls':'Mprev','nextBtnCls':'Mnext','autoplay':true,'viewSize':[790],'activeTriggerCls':'hidden'}" data-widget-type="Carousel" class="J_TWidget"> 
    <div class="XJ" style="height:525px;width:790px;overflow:hidden;padding:0px;margin:0px;border:0;"> 
     <ul class="macontent" style="height:525px;width:790px;padding:0px;margin:0px;"> 
      <li class="item"> 
       <div style="width:790px;height:525px;"> 
        <a href="#" target="_blank"> <img style="float:left;margin:0 5px 5px 0;border-radius:10px;" src="#" /> </a> 
        <a href="#" target="_blank"> <img style="float:left;margin:0 5px 5px 0;border-radius:10px;" src="#" /> </a> 
        <a href="#" target="_blank"> <img style="float:left;margin:0 0 5px 0;border-radius:10px;" src="#" /> </a> 
        <a href="#" target="_blank"> <img style="float:left;margin:0 5px 0 0;border-radius:10px;" src="#" /> </a> 
        <a href="#" target="_blank"> <img style="float:left;margin:0 5px 0 0;border-radius:10px;" src="#" /> </a> 
        <a href="#" target="_blank"> <img style="float:left;margin:0 0 0 0;border-radius:10px;" src="#" /> </a> 
       </div> </li> 
      <li class="item"> 
       <div style="width:790px;height:525px;"> 
        <a href="#" target="_blank"> <img style="float:left;margin:0 5px 5px 0;border-radius:10px;" src="#" /> </a> 
        <a href="#" target="_blank"> <img style="float:left;margin:0 5px 5px 0;border-radius:10px;" src="#" /> </a> 
        <a href="#" target="_blank"> <img style="float:left;margin:0 0 5px 0;border-radius:10px;" src="#" /> </a> 
        <a href="#" target="_blank"> <img style="float:left;margin:0 5px 0 0;border-radius:10px;" src="#" /> </a> 
        <a href="#" target="_blank"> <img style="float:left;margin:0 5px 0 0;border-radius:10px;" src="#" /> </a> 
        <a href="#" target="_blank"> <img style="float:left;margin:0 0 0 0;border-radius:10px;" src="#" /> </a> 
       </div> </li> 
      <li class="item"> 
       <div style="width:790px;height:525px;"> 
        <a href="#" target="_blank"> <img style="float:left;margin:0 5px 5px 0;border-radius:10px;" src="#" /> </a> 
        <a href="#" target="_blank"> <img style="float:left;margin:0 5px 5px 0;border-radius:10px;" src="#" /> </a> 
        <a href="#" target="_blank"> <img style="float:left;margin:0 0 5px 0;border-radius:10px;" src="#" /> </a> 
        <a href="#" target="_blank"> <img style="float:left;margin:0 5px 0 0;border-radius:10px;" src="#" /> </a> 
        <a href="#" target="_blank"> <img style="float:left;margin:0 5px 0 0;border-radius:10px;" src="#" /> </a> 
        <a href="#" target="_blank"> <img style="float:left;margin:0 0 0 0;border-radius:10px;" src="#" /> </a> 
       </div> </li> 
     </ul> 
    </div> 
    <div class="sn-simple-logo" style="width:790px;height:50px;left:auto;top:auto;padding:0px;border:none;display:block;cursor:pointer;"> 
     <div class="sn-simple-logo" style="z-index:99;width:790px;height:50px;padding:0px;border:none;left:auto;top:auto;"> 
      <ul class="ma_na" style="width:790px;height:50px;margin:0 auto;text-align:center;border:none;"> 
       <li class="hidden" style="display:inline;margin:5px 5px 0 0;float:left;"> <img src="#" /> </li> 
       <li style="display:inline;margin:5px 5px 0 0;float:left;"> <img src="#" /> </li> 
       <li style="display:inline;margin:5px 0 0 0;float:left;"> <img src="#" /> </li> 
      </ul> 
     </div> 
     <div class="sn-simple-logo" style="z-index:98;width:790px;height:50px;padding:0px;border:none;left:auto;top:auto;"> 
      <ul class="ma_nb" style="width:790px;height:50px;margin:0 auto;text-align:center;border:none;"> 
       <li style="display:inline;margin:5px 5px 0 0;float:left;"> <img src="#" /> </li> 
       <li style="display:inline;margin:5px 5px 0 0;float:left;"> <img src="#" /> </li> 
       <li style="display:inline;margin:5px 0 0 0;float:left;"> <img src="#" /> </li> 
      </ul> 
     </div> 
    </div> 
   </div> 
  </div> 

上面的代码天猫适用更换相应链接和图片就可以了。

0 条回应