拓展版手风琴轮播代码

<div id="accordion1"class="J_TWidget section" data-widget-type="Accordion"data-widget-config="{ 'triggerType': 'mouse' }" > 

<div class="ks-switchable-trigger ks-active"><i class="ks-icon"></i><ahref="http://www.taobao.com">文字文字</a></div> 

<div class="ks-switchable-panel">

<img src="http://XXXX.jpg"/> </div> 

<div class="ks-switchable-trigger"><iclass="ks-icon"></i><ahref="http://www.taobao.com">文字文字</a></div>

<div class="ks-switchable-panel" style="display:none;"><imgsrc="http://XXXX.jpg" /></div> 


<divclass="ks-switchable-trigger"><iclass="ks-icon"></i><ahref="http://www.taobao.com">文字文字</div> 

<divclass="ks-switchable-panel"style="display:none;"><img src="http://XXXX.jpg"></div>

<div class="ks-switchable-triggerlast-trigger"><i class="ks-icon"></i><ahref="http://www.taobao.com">文字文字</a></div>

<div class="ks-switchable-panel"style="display:none;"><imgsrc="http://XXXXX-234-120.jpg" /></div> </div> 


<style> #accordion1{width:233px;border:1px solid #ccc;} #accordion1.ks-switchable-trigger{padding:3px 10px;cursor:pointer;border-bottom:1px solid#ddd;background:#f3f3f3;overflow:hidden; height: 18px;} #accordion1.ks-switchable-trigger h3{float: left; width: 100px; margin-left: 5px; }#accordion1 .ks-switchable-panel{overflow:hidden;border-bottom:1px solid #ddd;}#accordion1.ks-icon{float:left;width:12px;height:12px;overflow:hidden;margin-top:2px;font-size:0;vertical-align:middle;background:url(assets/accordion-sprite.png)no-repeat 0 0;}

#accordion1 .ks-active.ks-icon{background-position:-20px 0;}

#accordion1 .last-trigger {border-bottom-width: 0 } #accordion1 .ks-active { border-bottom-width: 1px }#accordion1 .last-panel { border-bottom: none } </style>

 


你可能感兴趣的:(拓展版手风琴轮播代码)