【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弄好了，下节也是轮播，但是比这个好看点，呵呵
我这里还是要说下，以后的都是这样的，讲的比较简单，但是东西都是那么店，多看下我前面讲的，其实都是差不多的东西，我不想说那么多重复的
