10
2014
12

【专业版】三图全屏轮播模块

QQ截图20141210135802.png带色块导航的三图全屏轮播,支持淘宝旺铺专业版。

 

<div class="J_TWidget" data-widget-config="{'navCls':'hidden-nav','effect': 'fade', 'circular': true ,'contentCls':'bnav_8gyi3s6o3i'}" data-widget-type="Tabs">

 <div class="J_TWidget" data-widget-config="{'navCls':'hidden-nav','effect': 'fade', 'circular': true ,'contentCls':'bnav_q43sx4z9m1'}" data-widget-type="Tabs">

  <div class="J_TWidget bnav_8gyi3s6o3i" style="height:600px" data-widget-config="{'navCls':'hidden-nav','effect': 'fade', 'circular': true ,'contentCls':'bnav_8gyi3s6o3i'}" data-widget-type="Tabs">

   <div style="height: 600px; top: 0px; width: 1920px; left: -485px; display: block; opacity: 1; position: absolute; z-index: 9;" class="J_TWidget ks-switchable-panel-internal209" data-widget-config="{'navCls':'scroller-nav','contentCls':'scroller-content','steps':1,'prevBtnCls': 'prev','nextBtnCls': 'next','disableBtnCls': 'disable','circular':true,'effect':'scrollx','easing':'easeOutStrong','duration':1.0,'interval':'4','autoplay':true}" data-widget-type="Carousel" role="tabpanel" aria-hidden="true" aria-labelledby="ks-switchable212">

    <div class="scroller bslide_2jvsnxm2zt" style="width: 1920px; height: 600px; overflow: hidden; position: relative;">

     <ul class="scroller-content" style="position: absolute; width: 999999px; left: -1920px;">

      <li style="width: 1920px; height: 600px; overflow: hidden; border: none; margin: 0px; background-image: url(
http://img04.taobaocdn.com/imgextra/i4/770458061/TB2g7a7bXXXXXbiXXXXXXXXXXXX-770458061.jpg
); display: block; float: left; background-position: 50% 0px; background-repeat: no-repeat no-repeat;" class="ks-switchable-panel-internal544">

       <a target="_blank" href="#">

        <div style="width:1920px;height:600px;"></div>

       </a>

      </li>

      <li style="width: 1920px; height: 600px; overflow: hidden; border: none; margin: 0px; background-image: url(
http://img03.taobaocdn.com/imgextra/i3/770458061/TB2ZUy8bXXXXXazXXXXXXXXXXXX-770458061.jpg
); display: block; float: left; background-position: 50% 0px; background-repeat: no-repeat no-repeat;" class="ks-switchable-panel-internal544">

       <a target="_blank" href="#">

        <div style="width:1920px;height:600px;"></div>

       </a>

      </li>

      <li style="width: 1920px; height: 600px; overflow: hidden; border: none; margin: 0px; background-image: url(
http://img04.taobaocdn.com/imgextra/i4/770458061/TB2s395bXXXXXcxXXXXXXXXXXXX-770458061.jpg
); display: block; float: left; background-position: 50% 0px; background-repeat: no-repeat no-repeat;" class="ks-switchable-panel-internal544">

       <a target="_blank" href="#">

        <div style="width:1920px;height:600px;"></div>

       </a>

      </li>

     </ul>

    </div>

    <div class="bnav_8gyi3s6o3i" style="">

     <ul class="scroller-nav ks-switchable-panel-internal310" style="width: 1920px; overflow: hidden; text-align: center; left: 0px; bottom: 6px; font-family: Tahoma; height: 26px; color: rgb(185, 217, 231); font-size: 24px; display: block; opacity: 1; position: absolute; z-index: 9;" role="tabpanel" aria-hidden="false" aria-labelledby="ks-switchable212">

      <li style="width:20px;height:24px;text-align:center;display:inline-block;*zoom:1;*display:inline;vertical-align:top;cursor:pointer;overflow:hidden;height:10px; line-height:10px;margin:0 5px;background:#b9d9e7" class="ks-switchable-trigger-internal543"></li>

      <li style="width:20px;height:24px;text-align:center;display:inline-block;*zoom:1;*display:inline;vertical-align:top;cursor:pointer;overflow:hidden;height:10px; line-height:10px;margin:0 5px;background:#b9d9e7" class="ks-switchable-trigger-internal543 ks-active"></li>

      <li style="width:20px;height:24px;text-align:center;display:inline-block;*zoom:1;*display:inline;vertical-align:top;cursor:pointer;overflow:hidden;height:10px; line-height:10px;margin:0 5px;background:#b9d9e7" class="ks-switchable-trigger-internal543"></li>

     </ul>

    </div>

   </div>

   <ul class="hidden-nav ks-switchable-panel-internal209" style="display: block; height: 0px; line-height: 0; font-size: 0px; overflow: hidden; opacity: 0; position: absolute; z-index: 1;" role="tablist" aria-hidden="true">

    <li class="ks-active ks-switchable-trigger-internal208 ks-switchable-trigger-internal306 ks-switchable-trigger-internal309" role="tab" tabindex="0" id="ks-switchable212">1</li>

   </ul>

  </div>

 </div>

</div>

 

« 上一篇 下一篇 »