手风琴效果图片轮播网店装修代码

效果预览

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;}