在 DIY 時如何呼叫幻燈片，幻燈片該如何製作，這一講我們來教大家如何製作幻燈片

請跟隨教程從頭到尾仔細閱讀，你將收穫不小

第一步製作幻燈片：後臺--》 門戶--》 模組模板

點選 新增按扭 如下圖所示

1.gif

2010-9-25 10:48 上傳

下載附件 (12.23 KB)

此處可以可以選擇不同的模組分類如 附件類、帖子類、文章類、圖片類等等 可以根據你的喜好選擇不同的模組分類

下面我們以文章類為例來講解，選擇文章分類 點提交 如下圖所示 ，為新建的模組起個名字 如 「百變幻燈片」  

把程式碼框裡面的內容全部刪除

2.gif

2010-9-25 10:56 上傳

下載附件 (27.19 KB)

接下來 我們輸入程式碼

首先在程式碼框裡面輸入

  1. <div ></div>

其中的 div 可以是任意標籤，如 table，span 等，我們這裡以 div 為例

此處的標籤必須加一個的屬性 如下面程式碼所示 ，只有包含在有屬性的標籤裡面的內容才是幻燈片 ，切記
如下圖所示

3.gif

2010-9-25 11:07 上傳

下載附件 (13.58 KB)

接下來，我們增加幻燈程式碼   下面程式碼用來實現圖片 （或內容） 的顯示作用 屬性必須為的標籤

  1. <div ></div>

上面的程式碼必須放在 的屬性的標籤裡面 上面已經講過 ，完整程式碼如下

  1. <div >
  3. <div ></div>
  5. </div>

接下來我們來增加 「滑動」 、 「點選」 的程式碼   

  1. <div ></div>

上面的程式碼必須放在 的屬性的標籤裡面 上面已經講過 ，完整程式碼如下

  1. <div ><!--幻燈片開始-->
  3. <div > </div><!--圖片展示-->
  5. <div > </div><!--幻燈片控制展示-->
  7. </div><!--幻燈片結束-->

以上程式碼已完成幻燈片的框架 接下來我們為幻燈片新增資料程式碼

在<div > </div> 程式碼中間插入圖片顯示程式碼

如下程式碼

  1. <div ><img src="{pic}" width="{picwidth}" height="{picheight}" /> </div><!--圖片展示-->

其中 {pic} 為圖片地址變數， {picwidth} 為圖片寬度變數，{picheight} 為圖片高度變數

接下來為圖片增加迴圈程式碼 如下程式碼

  1. [loop]
  2. <img src="{pic}" width="{picwidth}" height="{picheight}" />
  3. [/loop]

完整程式碼如下

  1. <div ><!--幻燈片開始-->
  2. <div >
  3. [loop]
  4. <img src="{pic}" width="{picwidth}" height="{picheight}" />
  5. [/loop]
  6. </div>
  7. <!--圖片展示-->
  8. <div > </div><!--幻燈片控制展示-->
  9. </div><!--幻燈片結束-->

接下來 為滑動條增加數字

在<div > </div> 中增加婁字變數 如下程式碼

  1. <div >
  2. [loop1]<span>{currentorder}</span>[/loop1]
  3. </div>

其中 {currentorder} 是當前顯示的順序數字  , 其中 [loop1]...[/loop1] 為迴圈，你可能注意到了，這裡用了 [loop1] , 如果一個模組中需要多次迴圈時就可以使用 loop1 、 loop2 、 loop3 以此類推 來實現多處迴圈的目的

最後增加指令碼程式碼 如下   以下程式碼放在模組程式碼的最後

  1. <script type="text/javascript">
  2. runslideshow();
  3. </script>

此時一個簡單的幻燈片就完成了 ，幻燈片的完整程式碼 如下

  1. <div ><!--幻燈片開始-->
  2. <div >
  3. [loop]
  4. <img src="{pic}" width="{picwidth}" height="{picheight}" />
  5. [/loop]
  6. </div>
  7. <!--圖片展示-->
  8. <div >
  9. [loop1]<span>{currentorder}</span>[/loop1]
  10. </div><!--幻燈片控制展示-->
  11. </div><!--幻燈片結束-->
  13. <script type="text/javascript">
  14. runslideshow();
  15. </script>

如下圖所示

5.gif

2010-9-25 12:01 上傳

下載附件 (16.18 KB)