【18】淘宝sdk——入门实战之官方默认Widget轮播修改（二）

上一节已经说了一个轮播，这次还是一个，累赘的我就不说了，大家看代码，这次主要是看代码中的我注释的地方，php中的循环也很简单，不多说。

先载入模块吧，这次的模块名是luenbo02，接在上一节的代码

<!-- 950通栏0 -->
<div class="layout grid-m">
    <div class="luenbo_01_modules J_TRegion">
        <?php $luenbo_01_modules = array(
                array('id' => 'luenbo01', domId => "luenbo_01"), // 官方默认Widget轮播slide1
                array('id' => 'luenbo02', domId => "luenbo_02"), // 950图片轮播2模块
             );
         echo include_modules('luenbo_01_modules', $luenbo_01_modules);//引号里是坑名，后面是变量名
        ?>
    </div>

</div>

好了，现在看下模块中代码吧

<div class="box J_TBox" <?php echo $_MODULE_TOOLBAR ?>>

	<div class="luenbo02">
	    <!--contentCls[轮播列表所对应的内容列表的class值]-->
		<!--navCls[对其进行轮播的目标列表的class值]-->
        <div class="inluenbo02 J_TWidget" data-widget-type="Slide" data-widget-config="{
        	'navCls':'stick',
        	'contentCls':'stage',
        	'activeTriggerCls':'selected',
        	'effect':'<? echo $_MODULE[luenbo02_0]?>',
        	'easing':'easeOutStrong'}">
	    	<ul class="stage">

				<?php
					for ( $i = 1; $i < 5; $i++ ) {
						if ( $_MODULE['luenbo02_'.$i.'_0'] ) {
							echo '<li><a href="'. $_MODULE['luenbo02_'.$i.'_1'] .'" target="'. $_MODULE[luenbo02_5] .'">
							<img src="'. $_MODULE['luenbo02_'.$i.'_0'] .'" /> </a></li>';
						}else{
							echo '<li><a href="#" target="_blank"> <img src="assets/ad/950_'. $i .'.jpg" /> </a></li>';
						}
					}
				?>
				
	    	</ul>
	    	<ul class="stick">
	    		
				<?php
					for ( $i = 1; $i < 5; $i++ ) {
						if ( $_MODULE['luenbo02_'.$i.'_2'] ) {
							echo '<li'. ($i == 1  ? ' class="selected"' : "") .'> '. $_MODULE['luenbo02_'.$i.'_2'] .' </li>';
						}else{
							echo '<li'. ($i == 1  ? ' class="selected"' : "") .'> 请输入第 '. $i .' 张图片描述内容 </li>';
						}
					}
				?>
				
	    	</ul>
	    </div>
	
	</div>
		
</div>

 module.xml文件

<?xml version="1.0" encoding="GBK" standalone="yes"?>
<module xsi:noNamespaceSchemaLocation="http://www.cnblogs.com/../module.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <id>luenbo02</id>
    <name>自定义轮播</name>
    <file>luenbo02.php</file>
    <thumbnail>assets/images/index.png</thumbnail>
    <description>自定义轮播</description>
    <requiredCache>true</requiredCache>
    <parameters>
        <param label="请选择动画效果" formType="select" readonly="false" description="默认为水平滚动" ptype="text" name="luenbo02_0">
            <option selected="selected" value="scrollx">水平滚动</option>
            <option value="scrolly">垂直滚动</option>
            <option value="fade">淡隐淡现</option>
            <option value="none">无效果</option>
        </param>
        <param label="◆第一张图片路径┏" formType="text" readonly="false" description="┓图片1尺寸950*425像素" ptype="text" name="luenbo02_1_0">
           assets/ad/950_1.jpg
        </param>
        <param label="第一张图片描述┠" formType="text" readonly="false" description="┨请输入第一张图片的描述内容" ptype="text" name="luenbo02_1_2">
            请输入第一张图片的描述内容
        </param>
        <param label="第一张图片链接┗" formType="text" readonly="false" description="┛点击图片1打开的链接" ptype="text" name="luenbo02_1_1">
            http://www.taobao.com/?1
        </param>
        <param label="◆第二张图片路径┏" formType="text" readonly="false" description="┓图片2尺寸950*425像素" ptype="text" name="luenbo02_2_0">
            assets/ad/950_2.jpg
        </param>
        <param label="第二张图片描述┠" formType="text" readonly="false" description="┨请输入第二张图片的描述内容" ptype="text" name="luenbo02_2_2">
            请输入第二张图片的描述内容
        </param>
        <param label="第二张图片链接┗" formType="text" readonly="false" description="┛点击图片2打开的链接" ptype="text" name="luenbo02_2_1">
            http://www.taobao.com/?2
        </param>
        <param label="◆第三张图片路径┏" formType="text" readonly="false" description="┓图片3尺寸950*425像素" ptype="text" name="luenbo02_3_0">
            assets/ad/950_1.jpg
        </param>
        <param label="第三张图片描述┠" formType="text" readonly="false" description="┨请输入第三张图片的描述内容" ptype="text" name="luenbo02_3_2">
            请输入第三张图片的描述内容
        </param>
        <param label="第三张图片链接┗" formType="text" readonly="false" description="┛点击图片3打开的链接" ptype="text" name="luenbo02_3_1">
            http://www.taobao.com/?3
        </param>
        <param label="◆第四张图片路径┏" formType="text" readonly="false" description="┓图片4尺寸950*425像素" ptype="text" name="luenbo02_4_0">
            assets/ad/950_2.jpg
        </param>
        <param label="第四张图片描述┠" formType="text" readonly="false" description="┨请输入第四张图片的描述内容" ptype="text" name="luenbo02_4_2">
            请输入第四张图片的描述内容
        </param>
        <param label="第四张图片链接┗" formType="text" readonly="false" description="┛点击图片4打开的链接" ptype="text" name="luenbo02_4_1">
            http://www.taobao.com/?4
        </param>
        <param label="请选择链接打开方式" formType="select" readonly="false" description="默认为新窗口打开" ptype="text" name="luenbo02_5">
            <option value="_blank">_blank</option>
            <option value="_parent">_parent</option>
            <option value="_self">_self</option>
            <option value="_top">_top</option>
        </param>
    </parameters>
</module>

css文件

/*[950]自定义轮播02*/
.luenbo02{width:950px;overflow:hidden;}
.inluenbo02{position: relative; width: 950px; height: 350px; overflow: hidden;}
.inluenbo02 ul.stage li{ height: 350px; width: 950px; overflow: hidden; }
.inluenbo02 ul.stick{position: absolute;width:949px; bottom:0; right:1px; z-index: 99;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85);opacity:.85;}
.inluenbo02 ul.stick li{float:left;width:236px;height:36px;line-height:36px;background-color:#4E4E4E;color:#fff;text-align: center;cursor: pointer;margin-left:1px;}
.inluenbo02 ul.stick li.selected{background-color: #ff8808;font-weight: bold;}

 出来的效果

好了总的效果已经出来了

转载于:https://www.cnblogs.com/huige728/archive/2012/06/15/2550203.html