效果預覽

php:

<div class="box J_TBox"<?php echo $_MODULE_TOOLBAR ?>><div class="top_pic3"><div class="J_TWidget" data-widget-type="Accordion" data-widget-config="{triggerType:mouse,multiple:false,autoplay:true }"><div class="nav ks-switchable-trigger ks-active"><strong>1</strong><?php echo .$_MODULE[bt_01].?></div><div class="bd ks-switchable-panel"><a href="<?php echo .$_MODULE[lj_01].?>" target="_blank"><img src="<?php echo .$_MODULE[tp_01].?>"/></a></div><div class="nav ks-switchable-trigger"><strong>2</strong><?php echo .$_MODULE[bt_02].?></div><div class="bd hide ks-switchable-panel"><a href="<?php echo .$_MODULE[lj_02].?>" target="_blank"><img src="<?php echo .$_MODULE[tp_02].?>"/></a></div><div class="nav ks-switchable-trigger"><strong>3</strong><?php echo .$_MODULE[bt_03].?></div><div class="bd hide ks-switchable-panel"><a href="<?php echo .$_MODULE[lj_03].?>" target="_blank"><img src="<?php echo .$_MODULE[tp_03].?>"/></a></div><div class="nav ks-switchable-trigger"><strong>4</strong><?php echo .$_MODULE[bt_04].?></div><div class="bd hide ks-switchable-panel"><a href="<?php echo .$_MODULE[lj_04].?>" target="_blank"><img src="<?php echo .$_MODULE[tp_04].?>"/></a></div><div class="nav ks-switchable-trigger"><strong>5</strong><?php echo .$_MODULE[bt_05].?></div><div class="bd hide ks-switchable-panel"><a href="<?php echo .$_MODULE[lj_05].?>" target="_blank"><img src="<?php echo .$_MODULE[tp_05].?>"/></a></div> </div></div></div>

xml:

<?xml version="1.0" encoding="GBK" standalone="yes"?><module xsi:nonamespaceSchemaLocation="../../../module.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><id>lb03</id><name>手風琴疊加輪播</name><file>lb03.php</file><thumbnail>assets/images/frontpage.png</thumbnail><description>手風琴疊加輪播效果</description><requiredCache>true</requiredCache><parameters><!--第一張圖片--><param name="bt_01" label="☆--類目1：標題" description="請輸入類目標題" ptype="text" formType="text">我是類目標題一</param><param name="tp_01" label="大圖地址" description="圖片地址，手工制作，尺寸（798*298）" ptype="text" formType="text">assets/images/lb03/lb03_01.jpg</param><param name="lj_01" label="鏈接" description="圖片的超鏈接" ptype="text" formType="text">#</param><!--第二張圖片--><param name="bt_02" label="☆--類目2：標題" description="請輸入類目標題" ptype="text" formType="text">我是類目標題二</param><param name="tp_02" label="大圖地址" description="圖片地址，手工制作，尺寸（798*298）" ptype="text" formType="text">assets/images/lb03/lb03_02.jpg</param><param name="lj_02" label="鏈接" description="圖片的超鏈接" ptype="text" formType="text">#</param><!--第三張圖片--><param name="bt_03" label="☆--類目3：標題" description="請輸入類目標題" ptype="text" formType="text">我是類目標題三</param><param name="tp_03" label="大圖地址" description="圖片地址，手工制作，尺寸（798*298）" ptype="text" formType="text">assets/images/lb03/lb03_01.jpg</param><param name="lj_03" label="鏈接" description="圖片的超鏈接" ptype="text" formType="text">#</param><!--第四張圖片--><param name="bt_04" label="☆--類目4：標題" description="請輸入類目標題" ptype="text" formType="text">我是類目標題四</param><param name="tp_04" label="大圖地址" description="圖片地址，手工制作，尺寸（798*298）" ptype="text"formType="text">assets/images/lb03/lb03_02.jpg</param><param name="lj_04" label="鏈接" description="圖片的超鏈接" ptype="text" formType="text">#</param><!--第五張圖片--><param name="bt_05" label="☆--類目5：標題" description="請輸入類目標題" ptype="text" formType="text">我是類目標題五</param><param name="tp_05" label="大圖地址" description="圖片地址，手工制作，尺寸（798*298）" ptype="text" formType="text">assets/images/lb03/lb03_01.jpg</param><param name="lj_05" label="鏈接" description="圖片的超鏈接" ptype="text" formType="text">#</param></parameters></module>

CSS:

.top_pic3 {border: 1px solid #CCCCCC;height: 298px;margin-top: 10px;overflow: hidden;width: 948px;}.top_pic3 .nav {border-left: 1px solid #CCCCCC;color: #333333;cursor: pointer;float: left;height: 288px;padding: 10px 9px 0;width: 11px;}.top_pic3 .nav strong {display: block;font-size: 20px;margin-bottom: 40px;}.top_pic3 .ks-active {background: none repeat scroll 0 0 #FC338F;border: medium none;color: #FFFFFF;width: 12px;}.top_pic3 .bd {float: left;}.top_pic3 .bd img {height: 298px;width: 798px;}