淘宝装手风琴效果代码,淘宝装修模块代码手风琴,淘宝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>
如果有什么不清楚的可以联系我,见下图