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

 出来的效果

好了总的效果已经出来了