当前位置: 代码迷 >> Web前端 >> 淘宝装潢手风琴效果代码,淘宝装修模块代码手风琴
  详细解决方案

淘宝装潢手风琴效果代码,淘宝装修模块代码手风琴

热度:207   发布时间:2013-10-28 11:21:45.0
淘宝装修手风琴效果代码,淘宝装修模块代码手风琴

淘宝装手风琴效果代码,淘宝装修模块代码手风琴,淘宝js特效代码手风琴效果,淘宝装修特效前端电商设计。

淘宝横向950px的手风琴效果展示图片

淘宝装修手风琴效果图片


演示代码如下,需要把图片上传自己的淘宝图片空间链接上去,不然会报错说不能使用他人图片空间的图片

<div class="J_TWidget" style="width:950px;height:400px;" data-widget-type="Tabs" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'piaofu' }">
  <div class="piaofu">
    <div class="slider-promo J_TWidget ks-switchable-panel-internal239" style="width: 950px; height: 400px; display: block; opacity: 1; position: absolute; z-index: 9;" role="tabpanel" aria-hidden="true" aria-labelledby="ks-switchable242">
      <div style="border-bottom:http://shop103934077.taobao.com/?v=1DDDDDD 1px solid;border-left:http://shop103934077.taobao.com/?v=1DDDDDD 1px solid;width:948px;height:400px;overflow:hidden;border-top:http://shop103934077.taobao.com/?v=1DDDDDD 1px solid;border-right:http://shop103934077.taobao.com/?v=1DDDDDD 1px solid;">
        <div class="J_TWidget" data-widget-type="Accordion" data-widget-config="{'triggerType': 'mouse','autoplay':true, 'triggerCls':'zu', 'panelCls':'ci', 'multiple':false,'hasTriggers':true}" aria-multiselectable="false">
          <div class="J_TWidget section2" style="width:950px;float:left;height:400px;margin-left:0px;" role="tablist">
            <div id="ks-accordion-tab253" class="zu ks-switchable-trigger-internal245" align="center" style="padding-bottom:0px;background-color:#300;width:30px;float:left;height:400px;overflow:hidden;cursor:pointer;border-right:http://shop103934077.taobao.com/?v=1DDDDDD 1px solid;padding-top:0px;" role="tab" aria-expanded="true" aria-selected="false" aria-controls="ks-accordion-tab-panel249" tabindex="-1" aria-hidden="true">
              <table class="" width="15" cellspacing="0" cellpadding="0" border="0">
                <tbody>
                  <tr>
                    <td height="400"><span> <a target="_blank" style="color:#FFF;font-weight:normal;" href="http://shop103934077.taobao.com/?v=1" data-attr-replace="[{'type':'innerHTML','desc':'修改1标题'}]" oritabindex="0" tabindex="-1"> 两只小脚板创意女鞋免费提供模板</a> </span></td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div id="ks-accordion-tab-panel249" class="ci ks-switchable-panel-internal246" style="width: 825px; display: none; float: left; height: 400px; overflow: hidden;" role="tabpanel" aria-hidden="true" aria-labelledby="ks-accordion-tab253"> <span> <a target="_blank" href="http://shop103934077.taobao.com/?v=1" data-attr-replace="[{'type':'href','desc':'添加图片1详情地址'}]"> <img width="830" height="400" border="0" style="width:825px;height:400px;" src="http://img04.taobaocdn.com/imgextra/i4/382113414/T28kttXE8aXXXXXXXX_!!382113414.jpg" data-attr-replace="[ {'type':'src','desc':'添加图片1地址/图片大小825x400像素'}]"></img> </a> </span> </div>
            <div id="ks-accordion-tab254" class="zu ks-switchable-trigger-internal245" align="center" style="padding-bottom:0px;background-color:#00F;width:30px;float:left;height:400px;overflow:hidden;cursor:pointer;border-right:http://shop103934077.taobao.com/?v=1DDDDDD 1px solid;padding-top:0px;" role="tab" aria-expanded="true" aria-selected="false" aria-controls="ks-accordion-tab-panel250" tabindex="-1" aria-hidden="true">
              <table class="" width="15"  cellspacing="0" cellpadding="0" border="0">
                <tbody>
                  <tr>
                    <td height="400"><span> <a style="line-height:14px;color:#FFF;font-weight:normal;" data-attr-replace="[{'type':'innerHTML','desc':'修改2标题'}]" oritabindex="0" tabindex="-1"> 两只小脚板创意女鞋免费提供模板</a> </span></td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div id="ks-accordion-tab-panel250" class="ci te ks-switchable-panel-internal246" style="width: 825px; display: none; float: left; height: 400px; overflow: hidden;" role="tabpanel" aria-hidden="true" aria-labelledby="ks-accordion-tab254"> <span> <a target="_blank" href="http://shop103934077.taobao.com/?v=1" data-attr-replace="[{'type':'href','desc':'添加图片2详情地址'}]"> <img width="830" height="400" border="0" style="width:825px;height:400px;" src="http://img03.taobaocdn.com/imgextra/i3/382113414/T2S8OaXthXXXXXXXXX_!!382113414.jpg" data-attr-replace="[ {'type':'src','desc':'添加图片2地址/图片大小825x400像素'}]"></img> </a> </span> </div>
            <div id="ks-accordion-tab255" class="zu ks-switchable-trigger-internal245" align="center" style="padding-bottom:0px;background-color:#C00;width:30px;float:left;height:400px;overflow:hidden;cursor:pointer;border-right:http://shop103934077.taobao.com/?v=1DDDDDD 1px solid;padding-top:0px;" role="tab" aria-expanded="true" aria-selected="false" aria-controls="ks-accordion-tab-panel251" tabindex="-1" aria-hidden="true">
              <table class="" width="15"  cellspacing="0" cellpadding="0" border="0">
                <tbody>
                  <tr>
                    <td height="400"><span> <a style="line-height:14px;color:#FFF;font-weight:normal;" data-attr-replace="[{'type':'innerHTML','desc':'修改3标题'}]" oritabindex="0" tabindex="-1"> 两只小脚板创意女鞋免费提供模板</a> </span></td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div id="ks-accordion-tab-panel251" class="ci te ks-switchable-panel-internal246" style="width: 825px; display: none; float: left; height: 400px; overflow: hidden;" role="tabpanel" aria-hidden="true" aria-labelledby="ks-accordion-tab255"> <span> <a target="_blank" href="http://shop103934077.taobao.com/?v=1" data-attr-replace="[{'type':'href','desc':'添加图片3详情地址'}]"> <img width="830" height="400" border="0" style="width:825px;height:400px;" src="http://img03.taobaocdn.com/imgextra/i3/382113414/T2oah.XrXaXXXXXXXX_!!382113414.jpg" data-attr-replace="[ {'type':'src','desc':'添加图片3地址/图片大小825x400像素'}]"></img> </a> </span> </div>
            <div id="ks-accordion-tab256" class="zu ks-switchable-trigger-internal245 ks-active ks-switchable-select" align="center" style="padding-bottom:0px;background-color:#936;width:30px;float:left;height:400px;overflow:hidden;cursor:pointer;border-right:http://shop103934077.taobao.com/?v=1DDDDDD 1px solid;padding-top:0px;" role="tab" aria-expanded="true" aria-selected="true" aria-controls="ks-accordion-tab-panel252" tabindex="0" aria-hidden="true">
              <table class="" width="15" cellspacing="0" cellpadding="0" border="0">
                <tbody>
                  <tr>
                    <td height="400"><span> <a style="color:#FFF;font-weight:normal;" data-attr-replace="[{'type':'innerHTML','desc':'修改4标题'}]" oritabindex="0" tabindex="0"> 两只小脚板创意女鞋免费提供模板</a> </span></td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div id="ks-accordion-tab-panel252" class="ci ks-switchable-panel-internal246" style="width: 825px; display: block; float: left; height: 400px; overflow: hidden;" role="tabpanel" aria-hidden="false" aria-labelledby="ks-accordion-tab256"> <span> <a target="_blank" href="http://shop103934077.taobao.com/?v=1" data-attr-replace="[{'type':'href','desc':'添加图片4详情地址'}]"> <img width="830" height="400" border="0" style="width:825px;height:400px;" src="http://img04.taobaocdn.com/imgextra/i4/382113414/T2ym4_Xr8aXXXXXXXX_!!382113414.jpg" data-attr-replace="[ {'type':'src','desc':'添加图片4地址/图片大小825x400像素'}]"></img> </a> </span> </div>
          </div>
        </div>
      </div>
    </div>
    <ul class="ks-switchable-nav ks-switchable-panel-internal239" style="display: block; opacity: 0; position: absolute; z-index: 1;" role="tabpanel" aria-hidden="true">
      <li id="ks-switchable242" class="ks-active ks-switchable-trigger-internal238" role="tab" tabindex="-1"> … </li>
    </ul>
  </div>
</div>

如果有什么不清楚的可以联系我,见下图

两只小脚板创意女鞋装修免费

  相关解决方案