【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弄好了，下節也是輪播，但是比這個好看點，呵呵

我這里還是要說下，以后的都是這樣的，講的比較簡單，但是東西都是那么店，多看下我前面講的，其實都是差不多的東西，我不想說那么多重復的