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

在了解官方默认Widget轮播制作之前，我们要想了解下index.php，这个文件我们在前面已经说过了，除了头部和脚部的文件（header.php和footer.php），首页其他的模块都放在这里，当然这里就要说到在index.php中的布局了，有950、750&190（190&750）这样的布局，那么现在我们就是要用到950的布局（grid-m）不懂的话可以看看assets/stylesheets/global.css文件，下面让我们来看看吧。

首先我们要在控制台上创建模块，再在index.php文件中载入模块，同时我们也要注意到模块布局是grid-m（这个就是说950）

<!-- index.php --> 

<!-- 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
                             );
         echo include_modules('luenbo_01_modules', $luenbo_01_modules);//引号里是坑名，后面是变量名
        ?>
    </div>

</div>

 好了，模块我们也载入了，下面我们来看看我们要怎么写我们的轮播吧

 我们先去官方文档看下，我们的默认的轮播，我们选实例1（slide1）

这里你可以直接拷贝样式和css，但是我这里修改了下，看看我的吧

<div class="box J_TBox" <?php echo $_MODULE_TOOLBAR ?>>
    <div class="luenbo">
	    <div class="luenbo_01 J_TWidget  section loading slide1"  data-widget-type="Slide" data-widget-config="{'effect':'<? echo $_MODULE[guendong]?>','easing':'easeOutStrong','countdown':true}">
          <ol class="ks-switchable-content">
		     <?php
					for ( $i = 1; $i < 5; $i++ ) {
						if ( $_MODULE['luenbo01_'.$i.'_1'] ) {
							echo '<li><a href="'. $_MODULE['luenbo01_'.$i.'_2'] .'"><img src="'. $_MODULE['luenbo01_'.$i.'_1'] .'" /> </a></li>';
						}else{
							echo '<li><a href="#"> <img alt="" width="950" height="350" border="0" src="assets/ad/950_'. $i .'.jpg" /> </a></li>';
						}
					}
				?>
			<!--下面注销的是写好的html-->
			<!--<li>
				<a href="#"><img  width="950" height="350" border="0" src="assets/ad/950_1.jpg"/></a>
			</li>
			<li class="hidden">
				<a href="#"><img alt="" width="950" height="350" border="0" src="assets/ad/950_2.jpg"/></a>
			</li>
			<li class="hidden">
				<a href="#"><img alt="" width="950" height="350" border="0" src="assets/ad/950_1.jpg"/></a>
			</li>
			<li class="hidden">
				<a href="#"><img alt="" width="950" height="350" border="0" src="assets/ad/950_2.jpg"/></a>
			</li>-->
          </ol>
		</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>luenbo01</id>
    <name>官方默认Widget轮播slide1</name>
    <file>luenbo01.php</file>
    <thumbnail>assets/images/index.png</thumbnail>
    <description>官方默认Widget轮播slide1</description>
    <requiredCache>true</requiredCache>
    <parameters>
        <param label="请选择动画效果" formType="select" readonly="false" description="默认为水平滚动" ptype="text" name="guendong">
            <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*350像素" ptype="text" name="luenbo01_1_1">
           assets/ad/950_1.jpg
        </param>
        <param label="第一张图片链接┗" formType="text" readonly="false" description="┛点击图片1打开的链接" ptype="text" name="luenbo01_1_2">
            http://www.taobao.com/?1
        </param>
        <param label="◆第二张图片路径┏" formType="text" readonly="false" description="┓图片2尺寸950*350像素" ptype="text" name="luenbo01_2_1">
            assets/ad/950_2.jpg
        </param>
        <param label="第二张图片链接┗" formType="text" readonly="false" description="┛点击图片2打开的链接" ptype="text" name="luenbo01_2_2">
            http://www.taobao.com/?2
        </param>
        <param label="◆第三张图片路径┏" formType="text" readonly="false" description="┓图片3尺寸950*350像素" ptype="text" name="luenbo01_3_1">
            assets/ad/950_1.jpg
        </param>
        <param label="第三张图片链接┗" formType="text" readonly="false" description="┛点击图片3打开的链接" ptype="text" name="luenbo01_3_2">
            http://www.taobao.com/?3
        </param>
        <param label="◆第四张图片路径┏" formType="text" readonly="false" description="┓图片4尺寸950*350像素" ptype="text" name="luenbo01_4_1">
            assets/ad/950_2.jpg
        </param>
        <param label="第四张图片链接┗" formType="text" readonly="false" description="┛点击图片4打开的链接" ptype="text" name="luenbo01_4_2">
            http://www.taobao.com/?4
        </param>
    </parameters>
</module>

好了，现在就缺样式了，其实也很简单，也就是根据文档修改的，下面让我们看看吧。

/*官方默认Widget轮播slide1*/
.slide1 { position: relative; width: 950px; height: 350px;overflow: hidden; }
.slide1 .ks-switchable-nav { position: absolute; bottom: 5px; right: 5px; z-index: 99; }
.slide1 .ks-switchable-nav li {float: left;width: 16px;height: 16px;line-height: 16px;margin-left: 3px;background-color: #FCF2CF;
border: 1px solid #F47500;color: #D94B01;text-align: center;cursor: pointer;}
.slide1 .ks-switchable-nav li.ks-active {width: 18px;height: 18px;line-height: 18px;margin-top: -1px;color: #FFF;background-color: #FFB442;font-weight: bold;}
.slide1 .ks-switchable-content li { height: 350px; width: 950px; overflow: hidden; }
/* for countdown plugin */
.slide1 .ks-switchable-nav li,
.slide1 .ks-switchable-trigger-content {position: relative;}
.slide1 .ks-switchable-trigger-mask {position: absolute;right: 0;width: 18px;height: 18px;background-color: #FF9415;visibility: hidden}
.slide1 .ks-active .ks-switchable-trigger-mask {visibility: visible}	

 这样我们的轮播就出来了，看看效果图吧（依旧是压缩过头了，呵呵，将就的看吧）

下面是素材

 

=========================================================================================

ps.官方默认Widget轮播slide1弄好了，下节也是轮播，但是比这个好看点，呵呵

我这里还是要说下，以后的都是这样的，讲的比较简单，但是东西都是那么店，多看下我前面讲的，其实都是差不多的东西，我不想说那么多重复的